Tailwind CSS 실용적인 팁 및 모범 사례

맞춤형 디자인 토큰

tailwind.config.mjs에서 프로젝트별 디자인 토큰을 정의합니다.

theme: {
  extend: {
    colors: {
      primary: { /* 色阶 */ },
      surface: { /* 色阶 */ },
    },
  },
},

일반적으로 사용되는 기술

1. @apply를 사용하여 공개 스타일을 추출합니다.

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-500 text-white rounded-lg
           hover:bg-primary-600 transition-colors duration-200;
  }
}

2. 반응형 디자인

Tailwind의 중단점은 모바일 우선입니다.

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

3. 다크 모드

다크 모드를 쉽게 구현하려면 ‘dark:’ 접두사를 사용하세요.

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">自适应内容</p>
</div>

성능 최적화

사용하지 않는 CSS가 생성되지 않도록 content가 올바르게 구성되었는지 확인하세요.
JIT 모드를 사용하여 주문형 스타일 생성
빌드 중 자동 트리 쉐이크

요약

Tailwind CSS는 스타일 개발을 더욱 효율적으로 만듭니다. 사용자 정의 구성과 도구 클래스를 합리적으로 사용하면 일관되고 아름다운 인터페이스를 빠르게 구축할 수 있습니다.