Tailwind.css 4.0 알아보자

💡 알아봐야하는 이유

이번에 Tailwind CSS 3.0에서 4.0으로 마이그레이션하면서 진짜 고생을 많이 했어요…
생각보다 문법이 바뀐 부분이 있어서, 매번 공식 문서만 들여다보느라 시간 낭비가 컸네요.

그래서 앞으로 비슷한 상황 겪지 않게, 그리고 저처럼 삽질하는 분 없게끔!
가장 자주 쓰는 부분 위주로 정리해봤습니다.

---

변경된 부분

✅ @import "tailwindcss" 한 줄로 끝

Tailwind 3.x 까지는 이렇게 직접 파싱했죠.

❌ 기존 3.0 방식

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

그런데 이제는 4.0부터 아래처럼 딱 한 줄이면 끝납니다.
내부적으로 저 세 개를 포함하고 있는 구조여서 확실히 간결하다는 장점이있죠.

⭐️ 변경된 4.0 방식

@import "tailwindcss";

---

✅ 클래스 이름이 더 세분화됨 (예: shadow)

기존에는 shadow-sm, shadow-md, shadow-lg 이렇게 써야 했는데,
shadow-md 같은 게 구체적으로 어떤 크기인지 감이 잘 안 오기도 했고, 일관성도 애매했죠.

❌ 기존 3.0 방식

<input class="shadow-sm" />
<input class="shadow-md" />
<input class="shadow-lg" />

이제는 중간 단계를 더 세분화해서 사용할 수 있고, 네이밍도 훨씬 직관적이라고 생각이 드네요.

⭐️ 변경된 4.0 방식

<input class="shadow-xs" />
<input class="shadow-sm" />
<input class="shadow" />
<input class="shadow-lg" />

---

🎯 근데 사실... 이거 때문에 글 씁니다

바로 컬러 커스텀 때문에 많이 삽질을 했습니다...
처음엔 당연히 기존처럼 tailwind.config.js에서 컬러 추가해주면 되는 줄 알았습니다.

❌ 기존 3.0 방식

📁 globals.css

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      spacing: {
        '3xl': '36rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

그리고 JSX에 아래와 같이 적용했습니다.

📁 Page.tsx

export default function Home() {
	return <div className="bg-blue">test</div>
}

개발자도구 Elements까지 확인

근데... 아무리 해도 배경색이 안 나오는 거예요.

오류도 없고, 빌드도 잘 되는데, 색이 안 먹어요.

'뭐지...?'
'왜 안되지?'
'tailwind.config.js 문제인가?'
'postcss가 꼬였나?'

하면서 한참을 헤매다가...

---

😵 진짜 멘탈 흔들림

시간이 지날수록 점 점 멘탈이 흔들렸다...

그리고,,,,구글을 돌아다니다가 공식문서를 보는순간 "아 공식문서 좀 진작에 볼껄~!!"이라는 생각!!

---

⭐️ 변경된 4.0 방식

Tailwind 4부터는 .css에서 직접 커스텀 속성을 등록해야 합니다.
이제는 tailwind.config.js가 아니라 globals.css 같은 데서 @theme 안에 정의하는 거죠.

@import 'tailwindcss';

@theme {
  --color-blue: #1fb6ff;
  --color-purple: #7e5bef;
  --color-pink: #ff49db;
  --color-orange: #ff7849;

  --spacing-3xl: 36rem;
  --spacing-9xl: 128rem;

  --radius-4xl: 2rem;

  --font-sans: Graphik, sans-serif;

  /* 기존 추가된 컬러 */
  --color-mint-500: oklch(0.72 0.11 178);
  --color-banana: oklch(0.95 0.05 100);
}

---

🌟 좋은 점

• CSS 변수처럼 관리가 가능해짐
• 수정할 때마다 빌드 다시 안 해도 됨
• 런타임에서 바로 반영되니까 개발이 훨씬 빠름

---

Tailwind 4.0 쓰다 보면 “왜 안되지?” 하는 순간이 꼭 한 번 옵니다.
저처럼 구글링만 하지 마시고, 공식문서 봅시다!!!