Tailwind CSS 실전 팁 모음

Tailwind CSS란?

Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크로, 미리 정의된 클래스를 조합하여 빠르게 UI를 구축할 수 있습니다.

유용한 팁

1. @apply 디렉티브 활용

반복되는 유틸리티 클래스 조합은 @apply를 사용하여 재사용 가능한 클래스로 만들 수 있습니다.

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

2. 커스텀 색상 정의

tailwind.config.js에서 프로젝트에 맞는 커스텀 색상 팔레트를 정의하세요.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4e',
      },
    },
  },
};

마무리

Tailwind CSS는 익숙해지면 개발 속도를 크게 향상시킬 수 있는 강력한 도구입니다. 다양한 유틸리티 클래스를 활용하여 생산성을 높여보세요!