Tailwind

Tailwind CSS 개요

• 유틸리티 클래스 기반: m-4, bg-blue-500, flex 등과 같이 단일 CSS 속성을 담당하는 클래스를 조합해 스타일링합니다[^1][^6]⁷ .
• 빠른 개발: 별도의 CSS 파일을 작성할 필요 없이 HTML 내에서 바로 스타일을 지정할 수 있어 생산성이 높습니다[^2][^4]⁷ .
• 높은 커스터마이징: tailwind.config.js 파일을 통해 테마, 색상, 브레이크포인트 등 다양한 설정을 자유롭게 커스터마이징할 수 있습니다[^3][^5]⁷ .
• 반응형 디자인: 미디어 쿼리 없이도 모바일, 태블릿, 데스크톱 등 다양한 해상도에 맞는 반응형 스타일을 쉽게 적용할 수 있습니다[^4][^7].
• 다양한 프레임워크와 통합: React, Vue, Next.js 등 다양한 프론트엔드 프레임워크와 쉽게 연동됩니다[^4][^5].

1. 패키지 설치

npm install tailwindcss postcss autoprefixer

2. 설정 파일 생성

npx tailwindcss init -p

3. 설정 파일(tailwind.config.js)에서 사용할 파일 경로 지정

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. CSS 파일에 Tailwind 지시어 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 필요하다면, JavaScript 파일에서 CSS를 import

import "tailwindcss/tailwind.css";

장점

• 빠른 프로토타이핑과 개발 속도: 클래스만 조합하면 바로 스타일링이 가능해 개발 속도가 매우 빠릅니다[^4][^7].
• 유지보수 용이: 클래스 기반 구조로 스타일의 일관성과 유지보수가 쉽습니다[^4][^7].
• 높은 커스터마이징: 설정 파일을 통해 손쉽게 테마와 스타일을 확장하거나 수정할 수 있습니다[^5][^7].
• 디자이너-개발자 협업 강화: Figma 등 디자인 툴과의 협업에서 클래스 기반 스타일링이 큰 강점을 가집니다⁵ .

단점

• 러닝 커브: 처음 접하는 개발자는 클래스 명칭과 조합 방식에 익숙해지는 데 시간이 필요할 수 있습니다⁷ .
• HTML 코드 가독성 저하: 클래스가 많아질수록 HTML 코드가 길어지고 복잡해질 수 있습니다⁷ .
• 빌드 전 CSS 파일 크기: 모든 유틸리티를 포함할 경우 CSS 파일 크기가 커질 수 있으나, PurgeCSS 등으로 최적화 가능⁷ .
• 동적 스타일링 한계: JavaScript 변수 기반의 동적 스타일링은 별도 설정이 필요해 styled-components 등보다 불편할 수 있습니다⁷ .

예시

<div>
  <p>Please be careful when feeding the birds.</p>
</div>

결론