Tailwind CSS

~20 min · Tailwind v4, PostCSS, @theme

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Tailwind 가 default 추천인 이유

Tailwind 가 utility class compose 해서 page 별 minimal CSS bundle 한 개로 compile. Server 와 Client Component 둘 다 작동, CSS variable 통해 next/font 와 깔끔하게 integrate, 언어가 어디서든 같으니까 팀에서 predictable.

v4 setup 이 v3 보다 짧음

v4 가 tailwind.config.js 떨어뜨림. Configuration 이 @theme block 사용해서 CSS 안으로 이동. PostCSS plugin 이 source file 자동 detect. Setup: install, import, PostCSS configure, done.

Code

Install + wire up·bash

npm install tailwindcss @tailwindcss/postcss

app/globals.css·css

@import 'tailwindcss';

@theme {
  --color-brand: #2563eb;
  --font-display: 'Geist', system-ui, sans-serif;
}

postcss.config.mjs·ts

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Server Component 안에서 사용·tsx

export default function Card({ title, children }: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm
                    transition-shadow hover:shadow-md
                    dark:border-gray-800 dark:bg-gray-900">
      <h2 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
        {title}
      </h2>
      <div className="text-gray-600 dark:text-gray-400">{children}</div>
    </div>
  );
}

External links

Exercise

Tailwind v4 와 함께 새 Next.js app bootstrap. @theme 통해 custom --color-brand 정의하고 button 에 사용. Dark mode class 가 추가 config 없이 작동하는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousCSS Module Next →CSS-in-JS 한계

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.