บทความ เรื่องราว ความรู้ และประสบการณ์จากการสร้างเว็บไซต์และ Web Application
สอน Tailwind CSS ตั้งแต่เริ่ม ใช้กับ Next.js | KittiStack
Next.js & Frontend สอน Tailwind CSS ตั้งแต่เริ่ม ใช้กับ Next.js สอน Tailwind CSS v4 ตั้งแต่ติดตั้งกับ Next.js class พื้นฐาน responsive และ dark mode ไปจนถึงตั้งสีแบรนด์ ใช้ฟอนต์ไทยให้สวย และสิ่งที่ต่างจากบทความเก่าที่สอน v3
Kittipong C.
ทีมงาน KittiStack
October 27, 2026 · 7 min read
สอน Tailwind CSS ตั้งแต่เริ่ม ใช้กับ Next.js ยังไง (อัปเดต Tailwind v4) บทความสอน Tailwind CSS นี้เริ่มจากศูนย์ Tailwind เป็น CSS framework ที่ใช้ class สั้น ๆ ตกแต่งหน้าเว็บตรงใน HTML หรือ JSX เช่น p-4 คือ padding, text-xl คือขนาดตัวอักษร และ md:flex คือใช้ flex ตั้งแต่จอขนาดกลางขึ้นไป ไม่ต้องคิดชื่อ class เอง และไม่ต้องสลับไปมาระหว่างไฟล์ HTML กับไฟล์ CSS
Tailwind v4 ซึ่งเป็นเวอร์ชันปัจจุบัน ติดตั้งง่ายกว่าเดิมมาก ไม่ต้องมี tailwind.config.js แล้ว แค่บรรทัดเดียว @import "tailwindcss"; ในไฟล์ CSS ก็ใช้ได้ ถ้าสร้างโปรเจกต์ด้วย create-next-app ตัวติดตั้งจะถามว่าใช้ Tailwind ไหม ตอบ Yes แล้วเริ่มเขียนได้ทันที บทความนี้ใช้ Next.js เป็นหลัก มีส่วนเฉพาะสำหรับเว็บภาษาไทย และสรุปความต่างของ v3 กับ v4 สำหรับคนที่เจอบทความเก่า
Tailwind CSS ต่างจากการเขียน CSS เองยังไง ลองทำปุ่มสีน้ำเงินมุมโค้งแบบเดียวกันสองวิธี
เขียน CSS เอง:
#Next.js #Tailwind CSS #CSS #ฟอนต์ไทย
/* styles.css */
.btn-primary {
background: #2563eb;
color: white;
padding: 0. 5rem 1rem;
border-radius: 0. 5rem;
font-weight: 600 ;
}
.btn-primary:hover {
background: #1d4ed8;
}
<button class="btn-primary" >จองเลย</button>
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700" >
จองเลย
</button>
ข้อดีของ Tailwind คือเห็นหน้าตาของ element จากโค้ดตรงนั้นเลย ไม่ต้องตั้งชื่อ class ไม่มีปัญหา CSS ของหน้าหนึ่งไปทับอีกหน้า และ CSS ที่ส่งขึ้นเว็บจริงมีแค่ class ที่ใช้จริง ไฟล์จึงเล็ก ข้อเสียคือ class ยาวขึ้น ซึ่งแก้ได้ด้วยการแยกเป็น component (ดูหัวข้อจัดการ class ที่ยาว)
ติดตั้ง Tailwind CSS กับ Next.js วิธีที่ง่ายที่สุด: สร้างโปรเจกต์ใหม่แล้วตอบ Yes ตอนถามเรื่อง Tailwind
npx create-next-app@latest my-site
npm install -D tailwindcss @tailwindcss/postcss postcss
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': { } ,
} ,
}
/* app/globals.css */
@import "tailwindcss" ;
แล้ว import globals.css ใน app/layout.tsx (โปรเจกต์ที่สร้างจาก create-next-app มีอยู่แล้ว)
ถ้าใช้ Vite (เช่น โปรเจกต์ React ล้วน) ให้ใช้ @tailwindcss/vite แทน PostCSS แล้วเพิ่ม tailwindcss() ใน plugins ของ vite.config
สอน Tailwind CSS: class พื้นฐานที่ใช้บ่อยที่สุด ไม่ต้องท่องจำทั้งหมด ลงส่วนขยาย Tailwind CSS IntelliSense ใน VS Code แล้วพิมพ์ class จะมีรายการขึ้นให้เลือก พร้อมบอกว่า class นั้นแปลงเป็น CSS อะไร
ถ้าต้องการค่าที่ไม่มีในชุดมาตรฐาน ใส่ในวงเล็บเหลี่ยมได้ เช่น w-[420px] หรือ bg-[#06c755] (สีเขียวของ LINE) แต่ถ้าค่าไหนใช้ซ้ำหลายที่ ควรตั้งเป็นค่าในธีมแทน
ทำหน้าเว็บให้รองรับมือถือ (responsive) Tailwind คิดแบบ mobile-first class ที่ไม่มีคำนำหน้าใช้กับทุกขนาดจอ ส่วน class ที่มีคำนำหน้าอย่าง md: ใช้กับจอขนาดนั้นขึ้นไป
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" >
<!-- มือถือ 1 คอลัมน์, แท็บเล็ต 2 คอลัมน์, จอคอม 3 คอลัมน์ -->
</div>
ความผิดพลาดที่เจอบ่อยคือใช้ sm: เพื่อหมายถึงจอมือถือ ทั้งที่ sm: แปลว่าตั้งแต่ 640px ขึ้นไป ค่าสำหรับมือถือให้ใส่แบบไม่มีคำนำหน้า
hover, focus และ dark mode คำนำหน้าแบบเดียวกันใช้กับสถานะต่าง ๆ ได้ด้วย
<a class="text-blue-600 underline-offset-4 hover:underline focus-visible:outline-2" >
ดูผลงาน
</a>
<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100" >
เนื้อหาที่เปลี่ยนสีตามโหมดมืด
</div>
dark: ทำงานตามการตั้งค่าโหมดมืดของเครื่องผู้ใช้เป็นค่าเริ่มต้น ถ้าอยากให้มีปุ่มสลับโหมดเอง ให้เพิ่ม custom variant ใน CSS แล้วใส่ class dark ที่แท็ก <html>
@import "tailwindcss" ;
@custom-variant dark (&:where(.dark, .dark *));
ตั้งสีแบรนด์และฟอนต์ด้วย @theme ใน Tailwind v4 การปรับธีมทำในไฟล์ CSS ด้วย @theme ทุกค่าที่ตั้งจะกลายเป็น class ให้ใช้ทันที
/* app/globals.css */
@import "tailwindcss" ;
@theme {
--color-brand-500 : #0f766e;
--color-brand-600 : #0d5f59;
--font-sans: var(--font-thai), ui-sans-serif, system-ui, sans-serif;
}
ตั้ง --color-brand-500 แล้วใช้ bg-brand-500 หรือ text-brand-600 ได้เลย ค่าเหล่านี้ยังเป็น CSS variable ที่เรียกใช้ใน CSS ปกติได้ด้วย เช่น var(--color-brand-500)
ใช้ Tailwind กับเว็บภาษาไทย เรื่องนี้คู่มือภาษาอังกฤษไม่พูดถึง แต่มีผลกับหน้าตาเว็บไทยมาก
เลือกฟอนต์ที่มีภาษาไทย โหลดฟอนต์ด้วย next/font จะได้ไฟล์ฟอนต์จากเว็บเราเองและไม่กระพริบตอนโหลด
// app/layout.tsx
import { IBM_Plex_Sans_Thai } from 'next/font/google'
import './globals.css'
const thai = IBM_Plex_Sans_Thai({
subsets: [ 'thai', 'latin'] ,
weight: [ '400 ', '500 ', '700 '] ,
variable: '--font-thai',
} )
export default function RootLayout({ children } : { children: React.ReactNode } ) {
return (
<html lang="th" className={ thai.variable} >
<body className="font-sans" >{ children} </body>
</html>
)
}
ฟอนต์ไทยอื่นที่ใช้กันบ่อย เช่น Noto Sans Thai, Sarabun, Prompt และ Kanit เปลี่ยนชื่อใน import ได้เลย
เพิ่มระยะบรรทัด ภาษาไทยมีสระและวรรณยุกต์ซ้อนอยู่บนและล่างตัวอักษร ถ้าใช้ระยะบรรทัดแน่นแบบภาษาอังกฤษ บรรทัดจะดูอึดอัด และสระอาจชนกับบรรทัดถัดไป สำหรับเนื้อหายาว ให้ใช้ leading-relaxed หรือ leading-loose ส่วนหัวข้อใหญ่ที่ใช้ leading-tight ให้ลองดูว่าสระบนกับสระล่างไม่ชนกัน
ตั้ง lang="th" ที่แท็ก html เบราว์เซอร์จะตัดคำไทยได้ดีขึ้น และโปรแกรมอ่านหน้าจอจะอ่านเป็นภาษาไทย
ระวังตัวหนาของฟอนต์ไทยบางตัว บางฟอนต์ไม่มีน้ำหนักทุกระดับ ถ้าใช้ font-semibold แต่โหลดมาแค่ 400 กับ 700 เบราว์เซอร์จะทำตัวหนาปลอมขึ้นมา ให้โหลดน้ำหนักที่ใช้จริงให้ครบ
ตัวอย่างจริง: การ์ดบริการแบบ responsive const services = [
{ title: 'Landing Page', price: 'เริ่ม 5 ,500 บาท', desc: 'หน้าเดียว โหลดเร็ว พร้อมยิงโฆษณา' } ,
{ title: 'เว็บไซต์บริษัท', price: 'เริ่ม 15 ,000 บาท', desc: 'หลายหน้า ตั้งค่า SEO ครบ' } ,
{ title: 'Web Application', price: 'ประเมินตามงาน', desc: 'ระบบจอง ระบบสมาชิก หลังบ้าน' } ,
]
export default function ServiceCards() {
return (
<section className="mx-auto max-w-6xl px-4 py-16" >
<h2 className="text-3xl font-bold leading-snug text-slate-900" >บริการของเรา</h2>
<div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3" >
{ services.map((s) => (
<article
key={ s.title}
className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-md"
>
<h3 className="text-xl font-semibold text-slate-900" >{ s.title} </h3>
<p className="mt-2 font-medium text-brand-600" >{ s.price} </p>
<p className="mt-4 leading-relaxed text-slate-600" >{ s.desc} </p>
</article>
))}
</div>
</section>
)
}
ราคาในตัวอย่างเป็นตัวเลขสมมติ ส่วน text-brand-600 ใช้สีที่ตั้งไว้ใน @theme ด้านบน ถ้ายังไม่ได้ตั้ง เปลี่ยนเป็น text-teal-700 ได้
จัดการ class ที่ยาว แยกเป็น component ถ้า class ชุดเดียวกันใช้ซ้ำ เช่น ปุ่ม ให้สร้าง component Button แล้วใช้ซ้ำ แทนการคัดลอก class ไปทุกที่ วิธีนี้คือแนวทางหลักที่ทีม Tailwind แนะนำ
ลง prettier-plugin-tailwindcss ปลั๊กอินนี้เรียง class ให้เป็นลำดับเดียวกันทั้งโปรเจกต์อัตโนมัติ อ่านง่ายขึ้น และเวลารีวิวโค้ดก็เห็นความต่างชัด
ใช้ @apply เท่าที่จำเป็น @apply รวม class ของ Tailwind ไว้ในไฟล์ CSS ได้ เหมาะกับจุดที่แก้ HTML ไม่ได้ เช่น เนื้อหาบทความที่มาจาก CMS ถ้าใช้กับทุกอย่าง จะกลับไปเจอปัญหาเดิมของการเขียน CSS เอง
อย่าต่อชื่อ class จากตัวแปร Tailwind สร้าง CSS จาก class ที่เห็นเต็มคำในโค้ด ถ้าเขียน bg-${color}-500 class นั้นจะไม่ถูกสร้าง ให้เขียนชื่อเต็มไว้ในโค้ด เช่น เก็บเป็น object { red: 'bg-red-500', green: 'bg-green-500' }
Tailwind v3 กับ v4 ต่างกันยังไง บทความและคอร์สจำนวนมากยังสอน v3 ถ้าทำตามแล้วไม่ทำงาน ให้เทียบกับตารางนี้
ถ้ามีโปรเจกต์ v3 อยู่ Tailwind มีเครื่องมืออัปเกรดให้ รัน npx @tailwindcss/upgrade ในโปรเจกต์ที่ commit ไว้แล้ว เครื่องมือจะแปลง config เป็น @theme และเปลี่ยนชื่อ class ที่เปลี่ยนไปให้ อ่านรายละเอียดเพิ่มใน คู่มืออัปเกรดของ Tailwind
คำถามที่พบบ่อย
Tailwind CSS ทำให้ HTML รกไหม class ยาวขึ้นจริง แต่ส่วนใหญ่แก้ได้ด้วยการแยก component และเรียง class ด้วย Prettier หลายคนพบว่าโค้ดดูแลง่ายกว่าเดิม เพราะแก้หน้าตาได้ตรงจุดโดยไม่กลัวกระทบหน้าอื่น
ต้องรู้ CSS ก่อนเรียน Tailwind ไหม ควรรู้พื้นฐาน เพราะ class ของ Tailwind แทบทุกตัวแปลงตรงเป็นคำสั่ง CSS หนึ่งบรรทัด ถ้าเข้าใจ flexbox, grid และ box model อยู่แล้ว จะเรียน Tailwind ได้เร็วมาก
Tailwind ทำให้เว็บช้าไหม ไม่ Tailwind สร้าง CSS เฉพาะ class ที่ใช้จริงตอน build ไฟล์ CSS ที่ได้มักเล็กกว่าการเขียน CSS เองในโปรเจกต์ขนาดกลางขึ้นไป
Tailwind กับ Bootstrap ต่างกันยังไง Bootstrap ให้ component สำเร็จรูป เช่น ปุ่มและการ์ดที่มีหน้าตาพร้อมใช้ เว็บจึงมักออกมาคล้ายกัน ส่วน Tailwind ให้ชิ้นส่วนเล็ก ๆ มาประกอบเอง ได้หน้าตาตรงตามดีไซน์มากกว่า แต่ต้องประกอบเอง ถ้าอยากได้ component สำเร็จรูปบน Tailwind มีชุดอย่าง shadcn/ui ให้ใช้
Tailwind ใช้กับ WordPress หรือเว็บ HTML ธรรมดาได้ไหม ได้ ใช้ Tailwind CLI สร้างไฟล์ CSS จากไฟล์ HTML หรือ PHP ได้โดยไม่ต้องใช้ Next.js
สรุป สรุปบทความสอน Tailwind CSS นี้ ถ้าเพิ่งเริ่มเรียน Tailwind ให้สร้างโปรเจกต์ด้วย create-next-app แล้วตอบ Yes เรื่อง Tailwind ลองทำหน้าเดียวโดยใช้แค่ class ในตาราง class พื้นฐาน ฝึก responsive ด้วย md: กับ lg: แล้วค่อยตั้งสีแบรนด์และฟอนต์ไทยด้วย @theme ส่วนบทความไหนที่ยังให้สร้าง tailwind.config.js หรือใช้ @tailwind base ให้รู้ไว้ว่าเป็นวิธีของ v3
ถ้าอยากได้ Landing Page หรือเว็บไซต์ที่ทำด้วย Next.js กับ Tailwind ดีไซน์ตามแบรนด์ และรองรับภาษาไทยดี ดูรายละเอียดได้ที่ บริการรับทำ Landing Page
