การใช้ Tailwind CSS กับ Next.js แบบเข้าใจง่าย

Tailwind CSS เป็นหนึ่งใน CSS Framework ที่มาแรงที่สุดในตอนนี้ เพราะมันทำให้การเขียนสไตล์สะดวกขึ้นแบบสุด ๆ และใช้งานร่วมกับ Next.js ได้อย่างลงตัว วันนี้เราจะมาดูวิธีติดตั้งและใช้งาน Tailwind CSS กับ Next.js ตั้งแต่เริ่มต้นจนถึงเทคนิคการใช้งานให้โค้ดดูสะอาดขึ้น

🌟 ทำไมต้องใช้ Tailwind CSS?

Tailwind CSS ไม่เหมือน CSS Framework ทั่วไป เช่น Bootstrap ที่ให้เราสไตล์องค์ประกอบต่าง ๆ มาพร้อมใช้งานเลย แต่ Tailwind ใช้แนวคิด Utility-First หรือก็คือให้เรากำหนดสไตล์เองผ่าน class ที่เล็ก ๆ เช่น

<button class="bg-blue-500 text-white px-4 py-2 rounded">คลิกเลย!</button>

แปลว่าเราไม่ต้องสร้างไฟล์ CSS แยก ไม่ต้องคิดชื่อ class เอง แค่ใช้ class ที่มีมาให้ก็พอ! 🎉

🛠 วิธีติดตั้ง Tailwind CSS ใน Next.js

1. เปิด terminal แล้วรันคำสั่งติดตั้ง

npx create-next-app@latest my-tailwind-app
cd my-tailwind-app

2. ติดตั้ง Tailwind CSS และแพ็กเกจที่เกี่ยวข้อง

npm install -D tailwindcss postcss autoprefixer

3. สร้างไฟล์ tailwind.config.js

npx tailwindcss init -p

4. แก้ไข tailwind.config.js เพื่อให้ Tailwind ทำงานกับไฟล์ Next.js

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. นำเข้า Tailwind CSS ในไฟล์ styles/globals.css

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

6. ลองรันเซิร์ฟเวอร์ดู! 🚀

    npm run dev

🎨 เริ่มใช้งาน Tailwind CSS ใน Next.js

ตัวอย่างการใช้งานเบื้องต้น

เปิด pages/index.js แล้วลองใช้ Tailwind CSS

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">สวัสดี Tailwind CSS + Next.js!</h1>
    </div>
  );
}

🔥 สไตล์ที่ใช้ไปมีอะไรบ้าง?

• min-h-screen → ให้ความสูงเต็มหน้าจอ
• flex items-center justify-center → จัดให้อยู่ตรงกลาง
• bg-gray-100 → พื้นหลังสีเทาอ่อน
• text-4xl → ขนาดตัวอักษรใหญ่
• font-bold → ตัวหนา
• text-blue-600 → สีตัวอักษรฟ้า

ง่ายและเร็วมาก! 😍

🛠 เทคนิคการใช้งาน Tailwind CSS ให้โค้ดสะอาดขึ้น

✨ ใช้ @apply ในไฟล์ CSS

ถ้า class มันเยอะไป เราสามารถใช้ @apply เพื่อรวม class ใน globals.css ได้

/* styles/globals.css */
.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded shadow-md hover:bg-blue-600;
}

แล้วใช้ใน JSX แบบนี้

<button className="btn">กดเลย!</button>

📌 ใช้ classnames เพื่อจัดการ class ที่ซับซ้อน

ถ้ามีเงื่อนไขว่า class ไหนต้องแสดงหรือไม่แสดง ลองใช้ไลบรารี classnames

npm install classnames

จากนั้นใช้แบบนี้

import classNames from "classnames";

function Button({ primary }) {
  return (
    <button
      className={classNames(
        "px-4 py-2 rounded",
        primary ? "bg-blue-500 text-white" : "bg-gray-300 text-black"
      )}
    >
      กดเลย!
    </button>
  );
}

⚡️ ใช้ Tailwind CSS กับ Components ใน Next.js

สร้างคอมโพเนนต์ปุ่ม

สร้างไฟล์ components/Button.js

export default function Button({ children }) {
  return (
    <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
      {children}
    </button>
  );
}

แล้วใช้ใน index.js

import Button from "../components/Button";

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <Button>คลิกฉัน!</Button>
    </div>
  );
}

🚀 ใช้ Tailwind CSS กับ Dark Mode

Tailwind รองรับ Dark Mode ได้ง่ายมาก แค่เพิ่ม dark: ข้างหน้าคลาส

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
  โหมดมืดจ้า!
</div>

แต่ต้องไปแก้ tailwind.config.js นิดหน่อย

module.exports = {
  darkMode: "class", // เปิดใช้ dark mode แบบ manual
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

แล้วใช้ JavaScript เปลี่ยนโหมด

import { useEffect, useState } from "react";

export default function Home() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", darkMode);
  }, [darkMode]);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      <button onClick={() => setDarkMode(!darkMode)} className="px-4 py-2 bg-blue-500 text-white rounded">
        เปลี่ยนโหมด
      </button>
    </div>
  );
}

🎯 Tailwind CSS กับ Next.js ทำอะไรได้อีก?

• ใช้ Animations & Transitions เช่น animate-bounce
• ใช้ Responsive Design ง่าย ๆ เช่น md:bg-red-500
• ใช้ Grid & Flexbox ได้แบบสะดวกสุด ๆ
• ใช้ Custom Theme ปรับแต่งสีหรือฟอนต์ใน tailwind.config.js

🔥 สรุป

• Tailwind CSS ใช้งานง่ายและเร็วมากใน Next.js
• ติดตั้งง่ายแค่ npm install tailwindcss
• ใช้ class utility ได้เลย ไม่ต้องเขียน CSS แยก
• ปรับแต่งธีมเองได้ และรองรับ Dark Mode
• ใช้ร่วมกับ classnames หรือ @apply ให้โค้ดสะอาดขึ้น

ถ้าคุณยังไม่เคยลอง Tailwind CSS กับ Next.js นี่เป็นเวลาที่เหมาะสุด ๆ แล้ว! 🚀