Tailwind CSS 꿀팁

Tailwind CSS를 더 효율적으로 사용하기 위한 팁들을 정리했습니다.

1. @apply로 클래스 그룹화

자주 사용하는 유틸리티 조합을 컴포넌트 클래스로 만들 수 있습니다:

css
복사
1
2
3
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
}

2. 그룹과 피어 활용

부모 hover 시 자식 스타일 변경:

html
복사
1
2
3
<div class="group">
  <span class="group-hover:text-blue-500">Hover me!</span>
</div>

3. 커스텀 색상 추가

tailwind.config.js에서 커스텀 색상을 정의하세요:

javascript
복사
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        },
      },
    },
  },
};

4. 반응형 디자인

모바일 퍼스트로 작성하세요:

html
복사
1
2
3
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 모바일: 전체, 태블릿: 절반, 데스크탑: 1/3 -->
</div>

5. 다크 모드

dark: 접두사로 다크 모드 스타일 적용:

html
복사
1
2
3
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Content
</div>

결론

Tailwind CSS는 강력하고 유연한 유틸리티 퍼스트 CSS 프레임워크입니다.