[ TailwindCSS ] tailwind.config.js 커스텀 스타일 만들기

테일윈드에는 기본적으로 theme이 정의가 되어 있는데, 디폴트 값을 변경하거나, 새로운 스타일을 추가하고 싶을 때 tailwind.config.js에서 정의내려주면 된다. 

 

디폴트 값⬇️

https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js

 

디폴트 값을 변경하고 싶으면, 즉 덮어 쓰고 싶으면, 

theme 안에 바로 추가해주면 된다. 

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
  }
}

 

 

혹은, 

디폴트 값은 그대로 가지고 있으면서 theme을 더 만들어 추가하고 싶을 때는 extend 를 사용한다. 

 

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}