0Pricing
Tailwind CSS Academy · บทเรียน

การตั้งค่า Tailwind ใน Next.js

ติดตั้ง Tailwind ในโปรเจกต์ Next.js ตามคู่มืออย่างเป็นทางการ ตั้งค่า PostCSS และตรวจสอบว่าสไตล์โหลดได้อย่างถูกต้องใน App Router

การตั้งค่า Tailwind ใน Next.js เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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.

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Tailwind ใน Next.js” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Tailwind ใน Next.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Tailwind ใน Next.js”

ติดตั้ง Tailwind ในโปรเจกต์ Next.js ตามคู่มืออย่างเป็นทางการ ตั้งค่า PostCSS และตรวจสอบว่าสไตล์โหลดได้อย่างถูกต้องใน App Router คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า Tailwind ใน Next.js” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Tailwind ใน Next.js
  2. คลาสแบบมีเงื่อนไขใน React
  3. รูปแบบคอมโพเนนต์ด้วย CVA
  4. หลีกเลี่ยงคลาสขัดแย้งด้วย tailwind-merge
← กลับไปที่ Tailwind CSS Academy