Tailwind CSS 🪮

스타일 토큰 자체인 클래스를 조합하여 UI를 만드는 CSS 프레임워크이다. 

빠르게 스타일링할 수 있으면서 디자인 시스템만큼 일관된 디자인을 가능하게 해주고, 빌드 시에 사용한 클래스만 추려 아주 작은 CSS로 만들어준다.
요즘 React + Tailwind CSS 조합으로 많이 사용하는 것 같다.

 

Tailwind CSS의 철학은 Utility-First 컨셉이다. 

Utility-First란 작은 기능 단위(Utility Class)를 조합하여 UI를 만드는 접근 방식이다.  즉, 쉽게 말해 클래스 이름 자체가 곧 스타일 속성을 의미하는 것이다.

<!-- 전통적 CSS -->
<button class="btn-primary">저장</button>

/* CSS */
.btn-primary {
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border-radius: 0.375rem;
}

<!-- Tailwind Utility-First -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-md">
  저장
</button>

 

px-4, py-2, bg-blue-600, rounded-md 같은 스타일 토큰을 직접 HTML에 붙여 바로 UI가 완성된다는 의미다.

 

// 반복되는 스타일 설정
<button class="btn btn-green mr-4">Button</button>
<button class="btn btn-blue">Button</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
  .btn-blue {
    @apply text-white bg-blue-500 hover:bg-blue-700;
  }
</style>

 

 

왜 Utility-First인가?

1. 빠른 개발: 새로운 CSS 파일, 클래스를 정의할 필요 없음
2. 일관성 확보: Tailwind에서 제공하는 기능, 요소, 클래스를 사용니까 디자인 일관성 유지
3. 반복 줄임: @apply나 컴포넌트 추상화로 재사용 가능
4. 규칙적 확장성: hover:, md: , dark: 등과 같은 prefix 규칙이 통일되어 있어 러닝커브 낮음
5. 번들 사이즈 작음: 실제로 사용한 유틸리티만 포함되어 빌드됨
6. JS 코드와 분리
7. 생태계 풍부: 플러그인 다수

 

Utility-First 단점은?

1. HTML이 길어짐: 클래스가 많이 붙으면 한 눈에 보기 힘듦
2. 디자인 자유도와 제한 사이에 갈등: 임의 스타일을 자주 써야 한다면 불편 가능성 높음
3. 기존 UI 라이브러리와 충돌: reset(Preflight)이나 상속 규칙이 다른 경우 충돌 가능
4. JS 코드 사용 불가 (클래스명을 분기처리하여 동적으로 스타일링을 할 순 있지만 번거로운 설정 필요)

 

커스터마이징 (테마 확장)

// tailwind.config.js
export default {
  content: ["./src/**/*.{vue,ts,js,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#f5f8ff",
          500: "#3b82f6",
          600: "#2563eb",
        },
      },
      spacing: {
        13: "3.25rem",
      },
      borderRadius: {
        '2xl': '1rem',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

 

 

사용	브랜드/디자인 시스템을 직접 운영하거나 화면을 빠르게 조립해야 할 때 반응현/상테/다크모드 등 규칙적 변형이 많은 사이트 공용 스타일을 엄격히 사용하고 싶을 때
재고	템플릿에 스타일이 길게 붙는 스타일을 싫어할 때 BEM/SCSS로 잘 굴러갈 때 (기존 레거시가 많을 때) 컴포넌트로 충분한 단순 프로젝트

 

이런 프레임워크도 있구나 하는 마음으로 가볍게 읽으면서 넘어가면 됨.

 

이상 스텔라였습니다 ✍🏻