0Pricing
Tailwind CSS Academy · 강의

Next.js에서 Tailwind 설정하기

공식 가이드에 따라 Next.js 프로젝트에 Tailwind를 설치하고 PostCSS를 구성한 다음, App Router에서 스타일이 올바르게 로드되는지 확인합니다.

Next.js에서 Tailwind 설정하기은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Next.js and Tailwind: The Setup

Tailwind CSS has first-class support in Next.js. Starting with Next.js 13+, the create-next-app scaffolder includes a Tailwind setup option, so you can get started with a single command. The integration relies on PostCSS to process Tailwind at build time, producing an optimized CSS bundle with only the classes used in your project. Understanding the full setup flow lets you configure it manually in existing projects too.

# Create a new Next.js project with Tailwind
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app

cd my-app
npm run dev

Manual Tailwind Installation in Next.js

To add Tailwind to an existing Next.js project, install three packages: tailwindcss, postcss, and autoprefixer. Then generate the config files with npx tailwindcss init -p, which creates both tailwind.config.js and postcss.config.js. PostCSS is the pipeline that transforms your CSS — Next.js automatically detects postcss.config.js and applies its plugins during the build.

# Install dependencies
npm install -D tailwindcss postcss autoprefixer

# Generate config files
npx tailwindcss init -p

# This creates:
# tailwind.config.js
# postcss.config.js

Configuring Content Paths

The most critical configuration step is setting the content array in tailwind.config.js. This tells Tailwind which files to scan for class names so it can purge unused styles in production. For a Next.js App Router project, include all app, pages, components, and lib directories. Missing a path means Tailwind will purge classes used in that directory — a common source of missing styles in production builds.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}'  // if using /src dir
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Global CSS Entry Point

Create a globals.css file (typically at app/globals.css or styles/globals.css) and add the three Tailwind directives. Import this file in your root layout component — app/layout.tsx for the App Router — so Tailwind styles are available throughout the entire application. Never import it multiple times; one root-level import is sufficient.

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles go below */
@layer base {
  body {
    @apply bg-white text-gray-900 antialiased;
  }
}

/* app/layout.tsx */
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Using Tailwind in Next.js Components

Once set up, use Tailwind utility classes directly in your JSX. In Next.js, components can be either Server Components (default) or Client Components ('use client'). Tailwind classes work identically in both — they are pure HTML attributes that PostCSS processes at build time. There is no runtime cost to applying Tailwind classes in either component type.

// app/components/HeroSection.tsx
export default function HeroSection() {
  return (
    <section class="bg-gradient-to-br from-blue-600 to-indigo-700 py-24">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-5xl font-bold text-white mb-6">
          Build Faster with Tailwind
        </h1>
        <p class="text-xl text-blue-100 mb-8">
          Utility-first CSS for modern Next.js applications.
        </p>
        <a
          href="/get-started"
          class="bg-white text-blue-600 font-semibold px-8 py-3 rounded-full
                 hover:bg-blue-50 transition-colors"
        >
          Get Started
        </a>
      </div>
    </section>
  );
}

Extending the Theme in Next.js

Customize Tailwind for your Next.js project by extending the default theme in tailwind.config.js. Common extensions include custom brand colors, the Inter or Geist font (used by Next.js default template), and custom breakpoints. Use theme.extend to add new values alongside the defaults rather than replacing them entirely.

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme');

module.exports = {
  content: ['./app/**/*.{tsx,ts}', './components/**/*.{tsx,ts}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', ...fontFamily.sans]
      },
      screens: {
        '3xl': '1920px'
      }
    }
  },
  plugins: []
}

Tailwind With Next.js Layouts

Next.js App Router's nested layouts work seamlessly with Tailwind. Each layout segment can apply its own structural classes. A common pattern is the root layout setting the page background and font, a dashboard layout adding the sidebar flex structure, and individual page layouts providing content constraints like max-w-* and padding.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div class="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0">
        <nav class="p-4">{/* nav links */}</nav>
      </aside>

      {/* Main content */}
      <main class="flex-1 overflow-auto">
        <div class="max-w-7xl mx-auto p-8">
          {children}
        </div>
      </main>
    </div>
  );
}

Tailwind With next/image

When using next/image, apply Tailwind classes to control sizing and presentation. The Image component requires either explicit dimensions or the fill prop. When using fill, the parent must be relative and have defined dimensions — Tailwind's relative, w-full, and h-64 utilities handle this perfectly. Use object-cover and object-center for proper image cropping.

import Image from 'next/image';

export function CardImage({ src, alt }) {
  return (
    // Parent must be relative with defined dimensions
    <div class="relative h-48 w-full overflow-hidden rounded-t-xl">
      <Image
        src={src}
        alt={alt}
        fill
        class="object-cover object-center"
        sizes="(max-width: 768px) 100vw, 400px"
      />
    </div>
  );
}

TypeScript and Tailwind IntelliSense

Install the Tailwind CSS IntelliSense VS Code extension to get autocompletion, linting, and hover previews for Tailwind classes in your Next.js TypeScript project. The extension reads your tailwind.config.js to surface your custom theme values in the autocomplete menu. For projects using TypeScript config, rename the config to tailwind.config.ts and use the Config type from the tailwindcss package.

// tailwind.config.ts — TypeScript config
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  },
  plugins: []
};

export default config;

Verifying the Setup Works

After installation, verify your Tailwind setup with a quick sanity check. Add a visually obvious Tailwind class to your home page — like bg-red-500 text-white p-8 text-2xl — and run the dev server. If the styles apply, your setup is correct. If they do not, check that your globals.css import is in the root layout, the content paths cover the file you edited, and PostCSS is running (which Next.js handles automatically).

// app/page.tsx — quick verification
export default function HomePage() {
  return (
    <main class="min-h-screen bg-gray-50 flex items-center justify-center">
      <div class="bg-blue-600 text-white text-2xl font-bold px-8 py-6 rounded-2xl shadow-lg">
        Tailwind is working in Next.js!
      </div>
    </main>
  );
}

// Run: npm run dev
// Visit: http://localhost:3000
// You should see a blue rounded card

Common Setup Mistakes to Avoid

The most frequent Tailwind/Next.js setup issues are: missing content paths causing classes to be purged in production, importing globals.css in multiple places causing style duplication, and forgetting the @tailwind directives in the CSS file. Another common mistake is using className (React) vs class (HTML) — in JSX components, always use className to apply Tailwind classes.

// CORRECT in JSX/TSX
<div className="flex items-center gap-4 p-6">
  <span className="text-lg font-semibold text-gray-900">Hello</span>
</div>

// WRONG in JSX/TSX (use in plain HTML only)
<div class="flex items-center gap-4 p-6">
  <span class="text-lg font-semibold text-gray-900">Hello</span>
</div>

// Also check: globals.css must have all 3 directives
// @tailwind base;       ← resets and base styles
// @tailwind components; ← component layer
// @tailwind utilities;  ← all utility classes

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: installing Tailwind in Next.js requires tailwindcss, postcss, and autoprefixer, the content array controls which class names survive production purging, and globals.css with three @tailwind directives must be imported once in the root layout. Next up we explore managing conditional classes in React with clsx and tailwind-merge.

자주 묻는 질문

“Next.js에서 Tailwind 설정하기” 강의는 무료인가요?

네 — “Next.js에서 Tailwind 설정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Next.js에서 Tailwind 설정하기”에서 뭘 배우나요?

공식 가이드에 따라 Next.js 프로젝트에 Tailwind를 설치하고 PostCSS를 구성한 다음, App Router에서 스타일이 올바르게 로드되는지 확인합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Next.js에서 Tailwind 설정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Next.js에서 Tailwind 설정하기
  2. React의 조건부 클래스
  3. CVA를 사용한 컴포넌트 변형
  4. tailwind-merge로 클래스 충돌 방지
← Tailwind CSS Academy(으)로 돌아가기