Tailwind CSS

Tailwind CSS란?

HTML에서 유틸리티 클래스를 조합하여 UI를 스타일링하고,
빌드 단계에서 필요한 CSS만 생성하는 컴파일 기반 CSS 프레임워크이다.

Tailwind를 왜 사용할까?

1. 빠른 개발 속도

CSS 파일에 들어가지 않아도 CSS 작업을 할 수 있습니다.

기존 방식

.button {
  background: blue;
  padding: 8px 16px;
  border-radius: 4px;
}

Tailwind 사용

<button class="bg-blue-500 px-4 py-2 rounded">

2. 일관성 유지

Tailwind는 spacing, color, font-size 같은 값들을
미리 정의된 scale로 제공합니다.

p-1
p-2
p-4
p-8

와 같이 코드의 일관성을 유지 할 수 있습니다.

3. 유지보수 간단

CSS 파일에서 코드를 작성하는 것이 아닌 스타일이 HTML과 같이 있기 때문에 스타일 변경이 간편합니다.

Tailwind 작동 원리

간단하게 요약하자면 다음과 같다

1. CSS Entry 파일 로드
2. Tailwind config 확인
3. 프로젝트 파일 스캔
4. 사용된 클래스 추출
5. Utility Resolver 실행
6. CSS Rule 생성
7. dist/index.css 출력
8. Next.js 번들링
9. 브라우저 렌더링

1. 서버 실행

개발 서버(npm run dev 또는 pnpm dev)가 실행되면
빌드 도구(예: Vite, Next.js)가 Tailwind 컴파일러를 실행합니다.

2. CSS Entry(최상위) 파일 로드

@import "tailwindcss";

해당 코드가 있는 CSS 파일은 Entry Point로 사용합니다.

이 시점에서 Tailwind는 CSS 파싱을 시작합니다.

3. tailwind.config.ts 읽기

다음으로 Tailwind는 프로젝트 루트에서 config를 찾습니다.

export default {
  content: [
    "./src/**/*.{ts,tsx}",
    "../../apps/web/**/*.{ts,tsx}"
  ],
  theme: {
    extend: {}
  }
}

이 파일에서

1. class를 찾을 파일 위치
2. theme 설정
3. plugin
4. variant 설정

들의 정보를 얻습니다.

Tailwind v4부터는 content 설정이 없어도
프로젝트 파일을 자동으로 탐색하여 클래스를 찾습니다.

또한 기존에는 tailwind.config.ts에서 설정하던
theme 값도 CSS에서 직접 정의할 수 있습니다.

하지만 아직도 모노레포 등 복잡한 파일 구조에서는 필요합니다.

4. Content 경로 파일 스캔

content: [
    "./src/**/*.{ts,tsx}",
    "../../apps/web/**/*.{ts,tsx}"
  ]

config 파일에 content로 설정된 모든 파일을 스켄합니다.

./src/components/button.tsx
./src/components/card.tsx
../../apps/web/app/page.tsx

이 파일을 텍스트 기반으로 분석합니다.

5. Tailwind 클래스 추출

<div className="xs:flex bg-blue-500 p-4 hover:bg-blue-600">

이러한 텍스트를 읽었을 때

xs:flex bg-blue-500 p-4 hover:bg-blue-600

를 클래스로 추출합니다.
이러한 클래스를
Candidate Utility List로 저장합니다.

6. Utility Resolver 실행

이 전단계에서 저장한 클래스를 해석합니다.

예)

bg-blue-500

분석

prefix → bg
value → blue-500

Tailwind는 내부 theme에서 찾습니다.

예)

theme.colors.blue.500

마무리

#3b82f6

7. Variant 처리

예)

hover:bg-blue-600

분석

variant → hover
utility → bg-blue-600

결과 CSS

.hover\:bg-blue-600:hover {
  background-color: #2563eb;
}

8. CSS Rule 생성

Tailwind는 content 에서 읽은 클래스만 생성합니다.
이 값을 기반으로 CSS rule을 동적으로 생성합니다.

.bg-blue-500 {
  background-color: #3b82f6;
}

.p-4 {
  padding: 1rem;
}

이 방식이 바로 Tailwind의 JIT(Just-In-Time) 컴파일 방식입니다.

사용된 클래스만 분석하여 필요한 CSS만 생성합니다.

9. CSS Layer 구성

Tailwind는 CSS를 다음 Layer로 정리합니다.

@layer base
@layer components
@layer utilities

10. dist/index.css 생성

위에서 만든 모든 CSS를 합쳐서 파일을 만듭니다.

@layer base { ... }
@layer components { ... }
@layer utilities { ... }

11. Next.js에서 CSS import

다음 Next.js 에서 CSS 를 import 해옵니다.

import '@repo/ui/styles.css'

이 import는 실제로 이 전 단계에서 만든 dist/index.css를 import 해옵니다,

12. Next.js 번들링

이때 Next.js는

Next.js 의 빌드 시스템을 통해 CSS를 번들에 포함합니다.

흐름

Next.js bundler
↓
CSS bundle 생성
↓
브라우저 전달

13. 브라우저에서 스타일 적용

브라우저가 CSS를 받으면

HTML
↓
CSS 매칭
↓
Style 계산
↓
Layout
↓
Paint

과정을 거쳐 렌더링 됩니다.

결론

Tailwind는 HTML에서 사용된 클래스만 분석해서 CSS를 생성하는 컴파일 기반 CSS 엔진이다.