Tailwind CSS 가이드

Tailwind CSS는 유틸리티 기반 CSS 프레임워크입니다.

기본 개념

유틸리티 클래스

Tailwind는 작은 유틸리티 클래스들을 조합하여 스타일을 구성합니다.

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

반응형 디자인

브레이크포인트

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

<div class="text-sm md:text-base lg:text-lg">
  반응형 텍스트
</div>

커스터마이징

tailwind.config.js

테마를 확장하여 커스텀 색상, 폰트 등을 추가할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#fd7318',
      },
    },
  },
};

다크 모드

dark: 접두사로 다크 모드 스타일을 정의합니다.

<div class="bg-white dark:bg-gray-800">
  다크 모드 지원
</div>