Tailwind CSS는 유틸리티 우선(Utility-First) CSS 프레임워크다. 미리 정의된 수천 개의 유틸리티 클래스를 HTML에 직접 적용해 CSS 파일 없이 스타일링한다. 2017년 Adam Wathan이 개발했으며 현재 가장 인기 있는 CSS 프레임워크 중 하나다.
전통적 CSS vs Tailwind
css
/* 전통적 CSS */
.card {
display: flex;
flex-direction: column;
background-color: white;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
html
<!-- Tailwind: HTML에서 직접 작성 -->
<div class="flex flex-col bg-white rounded-lg p-6 shadow-sm">
카드 내용
</div>
주요 유틸리티 패턴
html
<!-- 반응형 디자인 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- 다크 모드 -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
<!-- 호버/포커스 상태 -->
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 transition-colors">
<!-- 임의 값 (JIT) -->
<div class="w-[342px] mt-[17px] bg-[#1a2b3c]">
tailwind.config.js 커스터마이징
javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
},
},
fontFamily: {
sans: ['Pretendard', 'system-ui'],
},
animation: {
'fade-in': 'fadeIn 0.3s ease-in-out',
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
};
@layer를 활용한 커스텀 컴포넌트
css
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white rounded-lg
hover:bg-blue-600 transition-colors font-medium;
}
}
관련 개념
