tailwind.config

tailwind를 적용시 필수적으로 생성되는 파일 중 하나가 바로 tailwind.config.ts 이다. tailwind 관련 설정을 하는 파일로 보이는데 어떤 역할을 하는지 살펴보자.

우선, tailwind.config 파일은 빌드타임에 tailwind가 변환할 클래스 네임을 탐색하는데, 이때 클래스 네임이 위치한 파일을 알려주거나 테마, 플러그인등의 설정을 할 수 있도록 하는 역할을 한다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

처음 생성하게 되면 위와 같은 구조로 생성되어 있다.

content 는 해당 경로안에 tailwind가 변환할 클래스 네임이 위치하고 있음을 알려준다. theme은 단어 그대로 테마를 설정하는데, extend를 사용해 기존 테마를 상속해 커스텀 테마를 설정할수도 있다. 마지막으로 plugin은 새로운 기능을 확장하는데 사용되는 플러그인을 설정한다.

기본적인 구조를 살펴봤으니 실제로 어떤식으로 사용해야 하는지 조금 더 살펴보자

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    colors: {
	primary: '#2a7de1',
	},
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

위 예시와 같이 theme 바로 하위에 설정할 클래스를 정의하는 경우, 기존의 tailwind에서 설정된 값들을 사용할수 없다. 좀더 정확히 말하자면 기존의 설정값을 덮어쓰게 된다. 그래서 기존값을 유지하면서 커스텀 값을 사용하기 위해서는 extends 하위에서 값들을 설정하는 것이다.

즉, 위의 예시에서 colors 하위에 다른 값들을 지정하지 않으면 기존의 색 클래스네임들은 사라지고 primary 라는 값만 남게된다.

theme: {
  screens: {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px',
    'mobile': '800px',
  },
}

반응형 ui를 구현하거나, 레이아웃의 크기를 조절하는 경우 사용되는 키워드인 sm, md,lg 등의 클래스네임도 커스텀이 가능하다. 기존의 클래스네임의 크기를 조정하거나 새로운 클래스 네임을 지정하고 싶다면 위 예시처럼 screen 키워드를 사용해 크기를 지정할 수 있다.