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 นี่เป็นเวลาที่เหมาะสุด ๆ แล้ว! 🚀
