TailwindCSS Config

tailwind.config.ts 파일은 Tailwind CSS를 사용하는 프로젝트에서 중요한 역할을 하는 설정 파일입니다. TypeScript로 작성되며, Tailwind CSS의 맞춤 설정을 정의하는 데 사용됩니다. 여기에는 다양한 옵션들이 있으며, 각 옵션에 대한 자세한 설명과 예시를 들어보겠습니다.

1. 기본 설정

1-1. `mode: 'jit'`

'jit' (Just-In-Time): 이 모드는 Tailwind CSS v2.1부터 도입된 Just-In-Time 컴파일러를 활성화합니다. JIT 모드에서는 클래스를 실시간으로 생성하여, 개발 시간을 단축하고 최종 빌드 크기를 줄일 수 있습니다. 예를 들어, 프로젝트 내에서 사용되는 Tailwind 클래스만이 최종 CSS 파일에 포함됩니다.

Tailwind CSS 3.0부터 Just-In-Time (JIT) 컴파일링이 기본 모드로 설정되어 있습니다. 이는 Tailwind 3에서는 mode: 'jit' 설정을 별도로 추가할 필요가 없음을 의미합니다.

mode: 'jit', // 기본이 jit이라 따로 설정해줄 필요는 없음

1-2. `content`

Tailwind가 스타일을 적용할 HTML 파일, JS 파일 등의 경로를 지정합니다. 이 옵션은 Tailwind가 사용되는 클래스를 스캔하여 불필요한 스타일을 제거하는 데 사용됩니다.

{
  ...
  content: ['./src/**/*.{html,ts,tsx}'],
}

1-3. `theme`

Tailwind의 기본 스타일을 사용자 정의하는 데 사용됩니다. 여기서는 색상, 폰트, 간격 등을 설정할 수 있습니다.

theme: {
  extend: {
    colors: {
      primary: '#ff4800',
    },
    spacing: {
      '128': '32rem',
    },
  },
},

1-4. `plugins`

Tailwind CSS에 추가 기능이나 컴포넌트를 제공하는 플러그인을 추가할 수 있습니다. https://tailwindcss.com/docs/plugins

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/aspect-ratio'),
  require('@tailwindcss/container-queries')
],

1-5. `darkMode`

다크 모드 설정을 활성화하고 방식을 지정할 수 있습니다. media는 사용자의 시스템 설정을 따르고, class는 특정 클래스를 기반으로 다크 모드를 활성화합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
};

dark:{class}이제 클래스를 기반으로 적용되는 대신 HTML 트리의 이전에 클래스가 존재할 prefers-color-scheme때마다 적용됩니다.

<!-- Dark mode not enabled -->
<html>
  <body>
    <!-- Will be white -->
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
  <body>
    <!-- Will be black -->
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

1-6. `separator`

Tailwind에서 사용하는 변형 클래스의 구분자를 설정할 수 있습니다. 기본적으로는 콜론(:)을 사용합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
};

2. theme의 extends 속성

Tailwind CSS의 theme 설정 내 extend 속성을 사용하면 기존 Tailwind CSS의 기본 테마를 확장하거나 덮어쓸 수 있습니다. 이를 통해 색상, 폰트, 간격, 크기 등 다양한 디자인 요소를 사용자 정의할 수 있습니다. 다음은 theme의 extend에 들어갈 수 있는 몇 가지 속성과 그에 대한 예시들입니다.

2-1. 색상 (`colors`)

기본 색상 팔레트에 새로운 색상을 추가하거나 기존 색상을 변경할 수 있습니다.

extend: {
  colors: {
    'custom-blue': '#1fb6ff',
    'custom-pink': '#ff49db',
  },
}

<div className="bg-custom-blue">text</div>

2-2. 간격(`spacing`)

마진, 패딩, 너비, 높이 등의 간격을 사용자 정의합니다.

extend: {
  spacing: {
    '13': '3.25rem',
    '15': '3.75rem',
  },
}

<div className="p-15 m-13">text</div>

2-3. 폰트 크기 (`fontSize`)

텍스트의 크기를 사용자 정의합니다.

extend: {
  fontSize: {
    xxs: '.65rem',
    big: '10rem',
  },
}

<div className="text-big">text</div>

2-4. 폰트 패밀리 (`fontFamily`)

사용할 폰트 패밀리를 정의합니다.

extend: {
  fontFamily: {
    sans: ['Graphik', 'sans-serif'],
    serif: ['Merriweather', 'serif'],
  },
}

2-5. 테두리 너비(`borderWidth`)

테두리의 너비를 사용자 정의합니다.

extend: {
  borderWidth: {
    '1': '1px',
    '3': '3px',
  },
}

<div className="border-1">text</div>

2-6. 테두리 반경 (`borderRadius`)

요소의 모서리 둥글기를 사용자 정의합니다.

extend: {
  borderRadius: {
    small: '5px',
    big: '50px',
  },
}

<div className="rounded-big">text</div>

2-7. 그림자 (`boxShadow`)

박스 그림자 스타일을 사용자 정의합니다.

extend: {
  boxShadow: {
    'custom': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  },
}

<div className="shadow-custom">text</div>

3. animation 적용

keyframes와 animation을 사용하여 애니메이션을 쉽게 적용할 수 있습니다. 요소가 회전하는 애니메이션을 만들어 적용해보겠습니다.

module.exports = {
  theme: {
    extend: {
      // 애니메이션 키프레임 추가
      keyframes: {
        spin: {
          from: { transform: 'rotate(0deg)' },
          to: { transform: 'rotate(360deg)' },
        },
      },
      // 애니메이션 유틸리티 클래스 추가
      animation: {
        spin: 'spin 1s linear infinite',
      },
    },
  },
  // ... 나머지 설정
};

<div class="animate-spin">...</div>

이 예시를 통해, Tailwind CSS에서 사용자 정의 @keyframes와 animation 클래스를 사용하여 애니메이션을 적용하는 방법을 확인할 수 있습니다. Tailwind는 사용자 정의 가능성이 높아서, 다양한 애니메이션 효과를 쉽게 만들 수 있습니다.

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      width: {
        '420': '420px',
      },
      height: {
        '15': '3.75rem' /* 60px */,
      },
      fontSize: {
        mediumsmall: ['0.8125rem', {}] /* 13px */,
      },
      spacing: {
        '15': '3.75rem' /* 60px */,
      },
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
  plugins: [require('tailwindcss-animate')],
};
export default config;

TailwindCSS Config

1. 기본 설정

1-1. `mode: 'jit'`

1-2. `content`

1-3. `theme`

1-4. `plugins`

1-5. `darkMode`

1-6. `separator`

2. theme의 extends 속성

2-1. 색상 (`colors`)

2-2. 간격(`spacing`)

2-3. 폰트 크기 (`fontSize`)

2-4. 폰트 패밀리 (`fontFamily`)

2-5. 테두리 너비(`borderWidth`)

2-6. 테두리 반경 (`borderRadius`)

2-7. 그림자 (`boxShadow`)

3. animation 적용

Font Size

`text-xs`

`text-sm`

`text-base`

`text-lg`

`text-xl`

`text-2xl`

`text-3xl`

`text-4xl`

`text-5xl`

`text-6xl`

`text-7xl`

`text-8xl`

`text-9xl`

tailwind.config.ts

1. 기본 설정

1-1. mode: 'jit'

1-2. content

1-3. theme

1-4. plugins

1-5. darkMode

1-6. separator

2. theme의 extends 속성

2-1. 색상 (colors)

2-2. 간격(spacing)

2-3. 폰트 크기 (fontSize)

2-4. 폰트 패밀리 (fontFamily)

2-5. 테두리 너비(borderWidth)

2-6. 테두리 반경 (borderRadius)

2-7. 그림자 (boxShadow)

3. animation 적용

Font Size

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

tailwind.config.ts

1-1. `mode: 'jit'`

1-2. `content`

1-3. `theme`

1-4. `plugins`

1-5. `darkMode`

1-6. `separator`

2-1. 색상 (`colors`)

2-2. 간격(`spacing`)

2-3. 폰트 크기 (`fontSize`)

2-4. 폰트 패밀리 (`fontFamily`)

2-5. 테두리 너비(`borderWidth`)

2-6. 테두리 반경 (`borderRadius`)

2-7. 그림자 (`boxShadow`)

`text-xs`

`text-sm`

`text-base`

`text-lg`

`text-xl`

`text-2xl`

`text-3xl`

`text-4xl`

`text-5xl`

`text-6xl`

`text-7xl`

`text-8xl`

`text-9xl`