왜 Tailwind CSS ?

오늘의 주제는 v4가 중요한 부분이기에, 이 부분에 관해선 간단히 짚겠다.

장점

• JSX 구문과 함께 바로 보이는 스타일 코드
• 빠른 작성을 통한 생산성 증가
• UI 라이브러리로 shadcn/ui를 채택 (이건 이미 Tailwind CSS를 고려한 선택이기도 함)
• cn 유틸과 cva 유틸로 용이한 확장성
• 친절한 문서
• AI에도 잘 적용되는 편
• 지속적인 업데이트

이 정도의 이유가 떠오르는데, 장점만 적힌 위 내용과는 다르게 단점도 존재한다.
물론 단점이 치명적이지 않고, 장점이 갖는 영향력이 더 크기에 선택하였다.

단점

• 동적 스타일링의 제한
• 지저분하게 보이는 JSX
• 빌드 시간

Tailwind CSS 공식 문서 →

---

v4를 사용해야 하는 이유

기존 v3와 비교했을 때, 개선된 부분들 위주로 간결히 체크해보았다.

• 빌드 속도 최적화 - (전체 리빌드 기준, 3.5배 이상)
  • 성능 향상 관련 공식 문서 →
  • 기존에 개발 환경에서 일정 규모 이상의 코드를 수정하고 반영하는 시간이 꽤 걸리는 경우가 많은데,
    Tailwind CSS의 빌드 타임이 줄어 들면 이 부분이 개선될 것으로 예상
• 더욱 간결해진 설정
  • Vite 설치 가이드 →
  • Next.js 설치 가이드 →
  • 의존성 패키지 수 감소
  • tailwind config 파일 삭제 (기존 config도 등록하여 사용 가능하나, 마이그레이션 용도로만 추천)
    • css 파일에 적용
• h-4, w-8 등, h-에서 에 해당하는 수가, 지정된 값이 아닌 모든 값을 적용할 수 있게 됨
  • 동적 유틸리티 값 관련 문서 →
• 간결한 업그레이드
  • 업그레이드 가이드 →
  • 위에서 본 개선된 부분들을 CLI를 통해 쉽게 업그레이드하여 적용 가능
  • 수동 업그레이드 또는 변경된 부분의 이해를 위한 가이드도 제공됨

이외에도 많은 확장성과, 변수 활용의 변경된 문법, 일부 제거된 요소들이 있으니
문서를 참고하면 좋을 듯하다.

Tailwind CSS v4 공식 발표 →

---

Vite + React + TypeScript 환경으로 설치 및 적용 예시

에 관해 작성하기 전에 shadcn/ui를 채택했다면?

shadcn/ui의 문서를 먼저 보는 것을 추천한다.

• shadcn/ui + Tailwind CSS v4
  • Tailwind v4와 shadcn/ui →
    • Vite 설치 가이드 →
    • Next.js 설치 가이드 →
    • (참고용) Next.js 15 + React 19 설치 가이드 →

[ Vite + React + TypeScript ] + Tailwind CSS v4 설치

1. 프로젝트 설치

Vite 공식 가이드 →

pnpm create vite

◇  Project name:
│  vite-react
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript

2. Tailwind CSS v4 설치

Vite와 함께 사용하는 설치 가이드 →

pnpm add tailwindcss @tailwindcss/vite

3. vite.config.ts에 tailwindcss 플러그인 추가

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

4. @import "tailwindcss"

• App.css는 제거, index.css를 globals.css로 변경 (main.tsx 에서 import)
  • 꼭 index.css를 재사용할 필요는 없음
  • Tailwind CSS 공식 문서의 경우, Vite 설정에서 html 파일 head 태그에 link 태그를 이용

    main.tsx에 import 하는 것과, html 파일에서 사용하는 것의 명확한 차이는 모르겠음
    기회가 되면 나중에 분석해보는 걸로

    
    

• globals.css 최상단에 @import "tailwindcss"; 추가

  @import "tailwindcss";
  
  ...

이제 기본적인 세팅은 완료되어, className을 입력하면 잘 적용되는 것을 확인할 수 있다.

여기까지는 Tailwind CSS의 공식 문서를 참고하면 아주 간단하게 진행할 수 있다.

---

테마 변수 지정

기존 Tailwind CSS v3의 경우, tailwind.config.ts에서 config를 통한 관리를 했다.

• v3 예시

  const config = {
    darkMode: ['class'],
    content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
    prefix: '',
    theme: {
      container: {
        center: true,
        padding: '2rem',
        screens: {
          '2xl': '1400px',
        },
      },
      extend: {
        zIndex: {
          '70': '70',
        },
        screens: {
          xs: '480px',
        },
        colors: {
          black: {
            DEFAULT: 'hsl(var(--color-black))',
            '02': 'hsl(var(--color-black-02))',
            '03': 'hsl(var(--color-black-03))',
          },
          white: 'hsl(var(--color-white))',
          stroke: 'hsl(var(--stroke))',
          border: 'hsl(var(--border))',
          turquoise: 'hsl(var(--color-turquoise))',
          error: {
            DEFAULT: 'hsl(var(--color-error))',
            '01': 'var(--color-error-01)',
            '02': 'hsl(var(--color-error-02))',
          },
          gray: {
            DEFAULT: 'hsl(var(--color-gray))',
            '01': 'hsl(var(--color-gray-01))',
            '02': 'hsl(var(--color-gray-02))',
          },
          
          ...

위 경우, 테마 변수에 지정한 컬러를 css 변수로 사용하면, css 파일에서 스타일 변수 또한 지정해야 했다.

v4는, tailwind.confg가 존재하지 않고, css 파일에서 @theme 을 통해 모두 처리하면 된다.

이때, css 컬러 변수를 별도로 생성하지 않아도 자동으로 적용된다.

테마 설정 문서 →

Tailwind CSS v4는 oklch 컬러 팔레트를 권장한다.

• OKLCH 색상 시스템 소개 →
• 나는 OKLCH Color Convert(Raycast - convert color)를 사용했다.

v4 예시 - @theme

• globals.css (테마 변수를 css 변수로 이용하는 예시도 추가)

@import 'tailwindcss';

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --color-banana: oklch(0.95 0.05 100);
}

body {
  color: var(--color-mint-500);
}

...

• App.tsx

function App() {
  return (
    <main className='flex flex-col items-center justify-center w-screen h-screen'>
      <h1 className='underline text-banana bg-mint-500'>Banana</h1>
      <p>mint chocolate</p>
    </main>
  );
}

export default App;

• 실행 화면

이 과정을 통해서, 간단히 테마 변수를 설정할 수 있다.

---

설정할 일이 없어 따로 눈에 띄게 작성하진 않았지만, 간단히 언급하자면

• config에서 설정하던 content의 범위도 따로 설정할 필요 없이, gitignore 파일에 작성된 항목은 content 범위에서 제외된다.
  ex) node_modules

---

여기까지 봤을 때, 기존 버전에 비해 초기 설정이 간결해진 것을 알 수 있다.

좀 더 편하게, Tailwind CSS의 세팅을 할 수 있게 되었고, 좀 사용해봐야 알겠지만 실제 사용성이나 확장성도 기대해볼 만하다.

뒤늦게서야 작성하는 이 글의 목적은 아래와 같다.

• 문서를 통한 개발이 익숙한 분들은 잘 적용하시겠지만,
  문서를 통한 개발이 익숙하지 않은 입문자분들이 보다 손쉽게 이해하고(최소한의 부분만)
  더 자세한 내용을 찾기 위해 문서를 보는 연습을 하게끔 하려는 작은 의도가 있다.

이후엔 좀 더 사용을 하면서, 추가된 기능이나 확장과 관련하여 추가적으로 포스팅하려 한다.