Tailwind CSS 유틸리티 우선 접근법

유틸리티 우선 CSS란 무엇입니까

Tailwind 설치하기

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

유틸리티 클래스 사용하기

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

반응형 접두사

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

상태 변형

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

테마 설정하기

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply — 패턴 추출하기

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

사용하지 않는 CSS 제거하기

React/Vue에서 Tailwind 사용하기

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

Tailwind에 대한 비판과 옹호

빠른 확인

요약: Tailwind CSS