Tailwind CSS คืออะไร? สอน Utility-First CSS สำหรับ Frontend Developer 2026

ในโลกของ Frontend Development ปี 2026 การเขียน CSS เปลี่ยนไปอย่างมากจากยุคที่เราต้องนั่งตั้งชื่อ Class แล้วเขียน Style แยกในไฟล์ CSS ยาวเหยียด วันนี้เรามี Tailwind CSS เครื่องมือที่เปลี่ยนวิธีคิดเรื่อง Styling ทั้งหมด ด้วยแนวคิด Utility-First ที่ให้คุณเขียน Style ตรงใน HTML ได้เลย โดยไม่ต้องสลับไปมาระหว่างไฟล์ ไม่ต้องคิดชื่อ Class และไม่ต้องกังวลเรื่อง CSS ที่บวมขึ้นเรื่อยๆ

บทความนี้จะพาคุณเรียนรู้ Tailwind CSS ตั้งแต่พื้นฐานจนถึงเทคนิคขั้นสูง รวมถึง Modern CSS Features ใหม่ๆ ที่มาเสริมพลังให้การเขียน Styling ในปี 2026 มีประสิทธิภาพมากยิ่งขึ้น ไม่ว่าคุณจะเป็นมือใหม่หรือเคยใช้ Bootstrap มาก่อน บทความนี้จะช่วยให้คุณเข้าใจและเริ่มใช้ Tailwind CSS ได้ทันที

Tailwind CSS คืออะไร?

Tailwind CSS คือ Utility-First CSS Framework ที่ให้ Class สำเร็จรูปขนาดเล็กจำนวนมาก แต่ละ Class ทำหน้าที่เพียงอย่างเดียว เช่น p-4 สำหรับ padding, text-center สำหรับจัดข้อความกลาง, bg-blue-500 สำหรับสีพื้นหลัง แทนที่จะสร้าง Class ชื่อ .card-container แล้วไปเขียน Style ในไฟล์ CSS คุณประกอบ Utility Classes เข้าด้วยกันตรงใน HTML เลย

Tailwind CSS ถูกสร้างโดย Adam Wathan ในปี 2017 และได้รับความนิยมอย่างรวดเร็ว จนกลายเป็น CSS Framework ที่มีผู้ใช้มากที่สุดอันดับต้นๆ ของโลก ในเวอร์ชัน 4.x ปัจจุบัน Tailwind มาพร้อมกับ JIT Engine ที่ Generate เฉพาะ CSS ที่ใช้จริง ทำให้ไฟล์ Output มีขนาดเล็กมาก

Utility-First vs Traditional CSS vs CSS-in-JS

มาเปรียบเทียบ 3 แนวทาง Styling หลักที่ใช้กันในปัจจุบัน เพื่อให้เข้าใจว่า Tailwind CSS แตกต่างอย่างไร

Traditional CSS (BEM, SMACSS) คือวิธีดั้งเดิมที่คุณสร้างชื่อ Class ที่มีความหมาย เช่น .btn-primary แล้วเขียน Style ในไฟล์ CSS แยก ข้อดีคืออ่านง่ายใน HTML แต่ข้อเสียคือ CSS File โตขึ้นเรื่อยๆ ตั้งชื่อ Class ยาก และมักมี Dead CSS ที่ไม่ได้ใช้แต่ไม่กล้าลบ

CSS-in-JS (Styled Components, Emotion) คือการเขียน CSS ใน JavaScript ข้อดีคือ Scoped Style อัตโนมัติ Dynamic Styling ง่าย แต่ข้อเสียคือ Runtime Overhead เพิ่ม Bundle Size และ Learning Curve สูง

Utility-First (Tailwind CSS) คือการใช้ Class เล็กๆ ประกอบกัน ข้อดีคือไม่ต้องตั้งชื่อ Class ไม่มี Dead CSS เพราะ Purge อัตโนมัติ Prototype เร็ว และ Consistent Design System ข้อเสียคือ HTML ยาวขึ้น ต้องเรียนรู้ Class Names ใหม่

<!-- Traditional CSS -->
<button class="btn btn-primary btn-lg">Click</button>
<style>
.btn { padding: 8px 16px; border-radius: 4px; }
.btn-primary { background: blue; color: white; }
.btn-lg { font-size: 18px; }
</style>

<!-- Tailwind CSS -->
<button class="px-4 py-2 bg-blue-500 text-white rounded text-lg hover:bg-blue-600">
  Click
</button>

<!-- CSS-in-JS (Styled Components) -->
const Button = styled.button`
  padding: 8px 16px;
  background: blue;
  color: white;
  border-radius: 4px;
  font-size: 18px;
`;

การติดตั้ง Tailwind CSS

ติดตั้งกับ Vite (แนะนำ)

# สร้างโปรเจกต์ Vite ใหม่
npm create vite@latest my-app -- --template react
cd my-app

# ติดตั้ง Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite

# เพิ่ม plugin ใน vite.config.js
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [tailwindcss(), react()]
})

# เพิ่มใน CSS หลัก (src/index.css)
@import "tailwindcss";

ติดตั้งกับ Next.js

# สร้างโปรเจกต์ Next.js ใหม่ (มี Tailwind built-in)
npx create-next-app@latest my-app
# เลือก "Yes" ตอนถาม "Would you like to use Tailwind CSS?"

# หรือเพิ่มในโปรเจกต์ที่มีอยู่
npm install tailwindcss @tailwindcss/postcss postcss

# postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
}

ใช้ผ่าน CDN (สำหรับทดลอง)

<!-- ใส่ใน <head> สำหรับทดลองเร็วๆ -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- ปรับแต่ง Config ได้ -->
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#3b82f6',
        }
      }
    }
  }
</script>

สำหรับ Production: อย่าใช้ CDN ใน Production เพราะจะโหลด Tailwind ทั้งหมด (~3MB) ใช้การติดตั้งผ่าน npm เท่านั้น เพื่อให้ได้ Tree-shaking และ Purging อัตโนมัติ

Core Concepts ของ Tailwind CSS

Responsive Design

Tailwind ใช้ Mobile-First Breakpoints ที่ง่ายมาก ทุก Utility Class สามารถใส่ Prefix ของ Breakpoint ได้ ซึ่งหมายความว่า Style ที่ไม่มี Prefix จะใช้กับทุกขนาดหน้าจอ และ Prefix จะใช้กับหน้าจอที่มีขนาดเท่ากับหรือใหญ่กว่า Breakpoint นั้น

<!-- Responsive: Mobile-first -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <!-- full width บนมือถือ, ครึ่งจอบน tablet, 1/3 บน desktop -->
</div>

<!-- Breakpoints เริ่มต้น:
  sm: 640px    (มือถือใหญ่)
  md: 768px    (tablet)
  lg: 1024px   (laptop)
  xl: 1280px   (desktop)
  2xl: 1536px  (จอใหญ่)
-->

<!-- ซ่อน/แสดงตาม Breakpoint -->
<div class="hidden md:block">แสดงบน tablet ขึ้นไป</div>
<div class="block md:hidden">แสดงเฉพาะมือถือ</div>

<!-- Font size ตาม Breakpoint -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">Responsive Text</h1>

Hover, Focus และ State Variants

Tailwind จัดการ Pseudo-classes ผ่าน Prefix ที่ใช้ง่ายมาก คุณสามารถเพิ่มเอฟเฟกต์ต่างๆ เมื่อผู้ใช้ Hover, Focus หรือ Active บน Element ได้โดยตรง

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded
               transition-colors duration-200">
  Hover Me
</button>

<!-- Focus -->
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2
              focus:ring-blue-200 focus:outline-none rounded px-3 py-2">

<!-- Group Hover (parent hover → child change) -->
<div class="group p-4 hover:bg-blue-50 rounded-lg cursor-pointer">
  <h3 class="text-gray-800 group-hover:text-blue-600">Card Title</h3>
  <p class="text-gray-500 group-hover:text-gray-700">Description</p>
</div>

<!-- First-child, Last-child -->
<ul>
  <li class="first:pt-0 last:pb-0 py-2 border-b last:border-0">Item</li>
</ul>

<!-- Peer (sibling state) -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-blue-600">Toggle me</label>

Dark Mode

Tailwind รองรับ Dark Mode ในตัว ด้วย Prefix dark: ที่ใส่หน้า Utility Class ได้เลย ค่าเริ่มต้นจะใช้ prefers-color-scheme ของระบบ หรือจะตั้งค่าให้ใช้ Class-based เพื่อให้ผู้ใช้เลือกเองก็ได้

<!-- Dark Mode -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-black dark:text-white">สวัสดี</h1>
  <p class="text-gray-600 dark:text-gray-400">
    เนื้อหาที่เปลี่ยนสีตาม Dark Mode
  </p>
  <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded">
    ปุ่ม
  </button>
</div>

<!-- ตั้งค่า Class-based Dark Mode -->
<!-- ใน tailwind.config.js -->
module.exports = {
  darkMode: 'class',  // ใช้ class แทน media query
}

<!-- เพิ่ม class="dark" ที่ <html> เพื่อเปิด Dark Mode -->
<html class="dark">...</html>

Layout ด้วย Flexbox และ Grid

Flexbox Layout

Tailwind ทำให้การจัด Layout ด้วย Flexbox เป็นเรื่องง่ายมาก แทนที่จะต้องจำ Property หลายตัวของ CSS Flexbox คุณใช้ Utility Classes ที่อ่านเข้าใจได้ทันที

<!-- Flex Row (แนวนอน) -->
<div class="flex items-center justify-between gap-4">
  <div>Left</div>
  <div>Right</div>
</div>

<!-- Flex Column (แนวตั้ง) -->
<div class="flex flex-col gap-2">
  <div>Top</div>
  <div>Bottom</div>
</div>

<!-- Center ทั้งแนวนอนและแนวตั้ง -->
<div class="flex items-center justify-center min-h-screen">
  <div>Centered Content</div>
</div>

<!-- Flex Wrap -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px]">Card 1</div>
  <div class="flex-1 min-w-[200px]">Card 2</div>
  <div class="flex-1 min-w-[200px]">Card 3</div>
</div>

<!-- Navbar ตัวอย่าง -->
<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <a href="/" class="text-xl font-bold">Logo</a>
  <div class="flex gap-6">
    <a href="#" class="hover:text-blue-500">Home</a>
    <a href="#" class="hover:text-blue-500">About</a>
    <a href="#" class="hover:text-blue-500">Contact</a>
  </div>
</nav>

CSS Grid Layout

<!-- Grid พื้นฐาน -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="bg-blue-100 p-4">2</div>
  <div class="bg-blue-100 p-4">3</div>
</div>

<!-- Responsive Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- Cards -->
</div>

<!-- Grid Span -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">กว้าง 2 ช่อง</div>
  <div class="col-span-1">กว้าง 1 ช่อง</div>
  <div class="col-span-1">กว้าง 1 ช่อง</div>
</div>

<!-- Auto-fit Grid (จำนวนคอลัมน์อัตโนมัติ) -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- จะจัดคอลัมน์ให้พอดีอัตโนมัติ -->
</div>

Spacing, Sizing และ Typography

ระบบ Spacing

Tailwind ใช้ระบบ Spacing ที่อิงจาก 4px เป็นหน่วย ซึ่งเป็นมาตรฐานในการออกแบบ UI สมัยใหม่ ค่า 1 หน่วยเท่ากับ 4px ดังนั้น p-4 คือ padding 16px และ m-8 คือ margin 32px

<!-- Padding -->
<div class="p-4">padding ทุกด้าน 16px</div>
<div class="px-4 py-2">padding ซ้ายขวา 16px, บนล่าง 8px</div>
<div class="pt-8 pb-4 pl-6 pr-6">กำหนดแต่ละด้าน</div>

<!-- Margin -->
<div class="m-4">margin ทุกด้าน</div>
<div class="mx-auto">จัดกลางแนวนอน</div>
<div class="mt-8 mb-4">margin บน-ล่าง</div>
<div class="-mt-4">margin ติดลบ (ขยับขึ้น)</div>

<!-- Space Between (ช่องว่างระหว่าง children) -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Sizing (Width, Height)

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-64">256px</div>
<div class="w-[350px]">Arbitrary value: 350px</div>
<div class="max-w-xl">max-width: 36rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- Height -->
<div class="h-screen">100vh</div>
<div class="h-full">100%</div>
<div class="min-h-screen">min-height: 100vh</div>
<div class="h-[calc(100vh-64px)]">Arbitrary calc</div>

<!-- Size (width + height พร้อมกัน) -->
<div class="size-12">48px x 48px</div>

Typography

<!-- Font Size -->
<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px (default)</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-4xl">36px</p>

<!-- Font Weight -->
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>

<!-- Text Alignment -->
<p class="text-left">ชิดซ้าย</p>
<p class="text-center">กลาง</p>
<p class="text-right">ชิดขวา</p>

<!-- Line Height & Letter Spacing -->
<p class="leading-relaxed tracking-wide">อ่านง่าย</p>

<!-- Text Decoration & Transform -->
<p class="underline decoration-2 decoration-blue-500">Underline</p>
<p class="uppercase tracking-widest">uppercase</p>
<p class="truncate">ข้อความยาวมากจะถูกตัดด้วย...</p>
<p class="line-clamp-3">จำกัดแค่ 3 บรรทัด</p>

Colors และ Theming

Tailwind มีระบบสีที่ครอบคลุมมาก โดยมีสีพื้นฐานหลายสี แต่ละสีมี 11 เฉด ตั้งแต่ 50 (อ่อนสุด) ถึง 950 (เข้มสุด) ทำให้คุณสามารถสร้าง Design ที่สวยงามและสม่ำเสมอได้ง่าย

<!-- สีข้อความ -->
<p class="text-gray-900">เข้มมาก</p>
<p class="text-gray-500">ปานกลาง</p>
<p class="text-blue-600">สีน้ำเงิน</p>
<p class="text-red-500">สีแดง</p>

<!-- สีพื้นหลัง -->
<div class="bg-blue-500">พื้นน้ำเงิน</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradient</div>
<div class="bg-black/50">สีดำ 50% opacity</div>

<!-- Border สี -->
<div class="border-2 border-blue-300">ขอบน้ำเงิน</div>
<div class="ring-2 ring-blue-500">Ring (outline รอบนอก)</div>

<!-- Gradient ซับซ้อน -->
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
  Beautiful Gradient
</div>

Custom Configuration (tailwind.config.js)

หนึ่งในจุดแข็งของ Tailwind คือการ Customize ได้ทั้งหมด คุณสามารถเพิ่มสี, Font, Spacing, Breakpoint หรือแม้แต่สร้าง Utility Class ใหม่ได้ผ่าน Configuration File

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,html}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      // เพิ่มสีเอง
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a5f',
        },
        brand: '#ff6b35',
      },
      // เพิ่ม Font
      fontFamily: {
        sans: ['Noto Sans Thai', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      // เพิ่ม Spacing
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      // เพิ่ม Breakpoint
      screens: {
        '3xl': '1920px',
      },
      // เพิ่ม Animation
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [],
}

Tailwind v4 ใหม่: ใน Tailwind v4 การตั้งค่าส่วนใหญ่ย้ายมาอยู่ใน CSS File โดยใช้ @theme directive แทน JavaScript config ทำให้ง่ายและเร็วขึ้น

Component Patterns (ไม่ใช้ @apply)

หลายคนบ่นว่า Tailwind ทำให้ HTML ยาว จริงอยู่ที่ Utility Classes เยอะ แต่ทางแก้ที่ดีไม่ใช่การใช้ @apply (ที่ Tailwind เองก็ไม่แนะนำ) แต่เป็นการสร้าง Component ใน Framework ที่คุณใช้

// React Component Pattern
function Button({ children, variant = 'primary', size = 'md', ...props }) {
  const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';

  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
    ghost: 'text-gray-600 hover:bg-gray-100 focus:ring-gray-400',
  };

  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button className={`${base} ${variants[variant]} ${sizes[size]}`} {...props}>
      {children}
    </button>
  );
}

// ใช้งาน
<Button variant="primary" size="lg">Save</Button>
<Button variant="danger">Delete</Button>
<Button variant="ghost" size="sm">Cancel</Button>

<!-- Vue Component Pattern -->
<template>
  <button :class="[base, variants[variant], sizes[size]]">
    <slot />
  </button>
</template>

<script setup>
defineProps({
  variant: { type: String, default: 'primary' },
  size: { type: String, default: 'md' }
})

const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors'
const variants = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700',
  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
}
const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
}
</script>

Tailwind กับ Headless UI และ Radix UI

ปัญหาหนึ่งของ Tailwind คือมันเป็นแค่ CSS ไม่มี JavaScript Component ให้ ดังนั้นถ้าต้องการ Component ที่ซับซ้อน เช่น Modal, Dropdown, Tabs คุณต้องใช้ Headless UI Library ร่วมด้วย

Headless UI สร้างโดยทีม Tailwind CSS เอง มี Component ที่จัดการ Accessibility และ Keyboard Navigation ให้ทั้งหมด แต่ไม่มี Style ใดๆ คุณ Style เองด้วย Tailwind

Radix UI เป็น Headless Component Library ที่ได้รับความนิยมสูงมาก เป็นพื้นฐานของ shadcn/ui และจัดการเรื่อง Accessibility ได้ดีเยี่ยม

// ตัวอย่าง Headless UI Dialog (Modal) กับ Tailwind
import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react'

function MyModal({ isOpen, onClose }) {
  return (
    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
      <div className="fixed inset-0 flex items-center justify-center p-4">
        <DialogPanel className="mx-auto max-w-sm rounded-xl bg-white p-6 shadow-xl">
          <DialogTitle className="text-lg font-bold">ยืนยันการลบ</DialogTitle>
          <p className="mt-2 text-gray-600">คุณต้องการลบข้อมูลนี้หรือไม่?</p>
          <div className="mt-4 flex gap-3 justify-end">
            <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">
              ยกเลิก
            </button>
            <button className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
              ลบ
            </button>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}

Animations และ Transitions

Tailwind มี Utility Classes สำหรับ Animation และ Transition ในตัว ทำให้คุณเพิ่ม Motion ให้ UI ได้โดยไม่ต้องเขียน CSS Animation เอง

<!-- Transition พื้นฐาน -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-300 ease-in-out">
  Smooth Color Change
</button>

<!-- Transition หลาย Property -->
<div class="hover:scale-105 hover:shadow-xl transition-all duration-300">
  Zoom + Shadow on Hover
</div>

<!-- Built-in Animations -->
<div class="animate-spin">Loading Spinner</div>
<div class="animate-ping">Ping Effect (notification dot)</div>
<div class="animate-pulse">Pulse (skeleton loading)</div>
<div class="animate-bounce">Bouncing Arrow</div>

<!-- Skeleton Loading Pattern -->
<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
  <div class="h-32 bg-gray-200 rounded"></div>
</div>

<!-- Custom Animation (ตั้งค่าใน config) -->
<div class="animate-fade-in">Fades in on mount</div>
<div class="animate-slide-up">Slides up on mount</div>

Plugins และ Ecosystem

Official Plugins

npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),     // Prose styling สำหรับ CMS content
    require('@tailwindcss/forms'),           // Reset สวยๆ สำหรับ form elements
    require('@tailwindcss/container-queries'), // Container query support
  ],
}

<!-- @tailwindcss/typography: จัด Style ให้ HTML content อัตโนมัติ -->
<article class="prose prose-lg prose-blue max-w-none">
  <h1>บทความ</h1>
  <p>เนื้อหาจาก CMS จะถูกจัด Style อัตโนมัติ</p>
  <pre><code>console.log('hello')</code></pre>
</article>

Tailwind CSS vs Bootstrap เปรียบเทียบ

เกณฑ์	Tailwind CSS	Bootstrap
แนวคิด	Utility-First	Component-Based
Customization	สูงมาก (config + arbitrary values)	ปานกลาง (Sass variables)
Bundle Size	เล็กมาก (purge unused)	ค่อนข้างใหญ่ (~230KB)
Learning Curve	ต้องเรียน Class Names ใหม่	ง่ายกว่า (ชื่อ Class สื่อความหมาย)
Design Freedom	ออกแบบอิสระ ไม่ดูเหมือนกัน	เว็บมักดูคล้ายกัน
JavaScript	ไม่มี (ใช้ Headless UI)	มี JS Components ในตัว
Community	เติบโตเร็ว เป็นที่นิยมมาก	ใหญ่และมั่นคง
Best For	Custom Design, Modern Apps	Admin Panel, Prototyping เร็ว

เลือกอะไรดี? ถ้าคุณต้องการ Custom Design ที่ไม่ดูเหมือนเว็บอื่น เลือก Tailwind CSS ถ้าต้องการ Component สำเร็จรูปที่ใช้ได้ทันที เลือก Bootstrap แต่ในปี 2026 Tailwind CSS เป็นที่นิยมมากกว่าอย่างชัดเจน

Modern CSS Features ที่ต้องรู้ในปี 2026

นอกจาก Tailwind CSS แล้ว CSS เองก็มีฟีเจอร์ใหม่ๆ ที่ทรงพลังมาก Browser สมัยใหม่รองรับเกือบทั้งหมดแล้ว มาดูว่ามีอะไรบ้าง

Container Queries

Container Queries ช่วยให้ Element ปรับ Style ตามขนาดของ Container (Parent) แทนที่จะดูขนาด Viewport เหมือน Media Queries ทำให้สร้าง Component ที่ Responsive ได้ดีกว่ามาก

/* CSS Container Queries */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

/* Tailwind + Container Queries */
<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <!-- ปรับตามขนาด container -->
  </div>
</div>

:has() Selector (Parent Selector)

selector :has() คือ Parent Selector ที่นักพัฒนารอคอยมานาน ช่วยให้ Style Parent Element ตามเงื่อนไขของ Child ได้

/* เปลี่ยนสี form group เมื่อ input ข้างใน focus */
.form-group:has(input:focus) {
  border-color: blue;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ถ้า card มีรูป ให้จัดเป็น grid */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* ถ้า card ไม่มีรูป ให้จัดเป็น flex column */
.card:not(:has(img)) {
  display: flex;
  flex-direction: column;
}

/* Style เปลี่ยนเมื่อ checkbox ถูกเลือก */
label:has(input[type="checkbox"]:checked) {
  color: green;
  font-weight: bold;
}

CSS Nesting (Native)

CSS Nesting เป็นฟีเจอร์ที่เคยมีเฉพาะใน Sass/Less ตอนนี้ CSS Native รองรับแล้ว ทำให้เขียน CSS ที่อ่านง่ายขึ้นโดยไม่ต้องพึ่ง Preprocessor

/* CSS Nesting (Native) */
.card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;

  & h2 {
    font-size: 1.5rem;
    color: #1e293b;
  }

  & p {
    color: #64748b;
    line-height: 1.8;
  }

  &:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Cascade Layers (@layer)

Cascade Layers ช่วยจัดการลำดับความสำคัญของ CSS ได้ดีขึ้น ไม่ต้องพึ่ง Specificity หรือ !important อีกต่อไป

/* กำหนดลำดับ Layer */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: 'Noto Sans Thai', sans-serif; line-height: 1.8; }
  h1 { font-size: 2rem; }
}

@layer components {
  .btn { padding: 8px 16px; border-radius: 8px; }
  .card { background: white; border-radius: 12px; padding: 1.5rem; }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
}

/* utilities จะ override components เสมอ โดยไม่ต้องสนใจ specificity */

View Transitions API

View Transitions API ช่วยให้สร้าง Smooth Page Transitions ได้ง่ายมาก ทำให้เว็บดูเหมือน Native App โดยเฉพาะเมื่อใช้กับ MPA (Multi-Page Application)

/* CSS View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* กำหนด View Transition Name สำหรับ Element เฉพาะ */
.hero-image {
  view-transition-name: hero;
}

.page-title {
  view-transition-name: title;
}

/* Animate เฉพาะ Element ที่ต้องการ */
::view-transition-group(hero) {
  animation-duration: 0.5s;
}

/* JavaScript: เริ่ม Transition */
document.startViewTransition(() => {
  // update DOM here
  document.querySelector('.content').innerHTML = newContent;
});

CSS Variables กับ Tailwind

CSS Custom Properties (CSS Variables) ทำงานร่วมกับ Tailwind ได้ดีมาก ช่วยให้คุณสร้าง Dynamic Theme ที่เปลี่ยนได้ตอน Runtime

/* กำหนด CSS Variables */
:root {
  --color-primary: 59 130 246;    /* RGB values */
  --color-secondary: 139 92 246;
  --color-accent: 16 185 129;
  --radius: 0.5rem;
}

.theme-orange {
  --color-primary: 249 115 22;
  --color-accent: 234 88 12;
}

/* ใช้กับ Tailwind (tailwind.config.js) */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
      }
    }
  }
}

/* ใช้ใน HTML */
<button class="bg-primary text-white hover:bg-primary/80">
  Dynamic Theme Button
</button>

/* เปลี่ยน Theme ด้วย JavaScript */
document.documentElement.style.setProperty('--color-primary', '234 88 12');

Performance Optimization

Purging และ JIT (Just-In-Time)

Tailwind CSS ใช้ JIT Engine ที่ Generate เฉพาะ CSS Class ที่คุณใช้จริงเท่านั้น ซึ่งหมายความว่า Production CSS จะมีเฉพาะ Class ที่ปรากฏใน Template ของคุณ

// tailwind.config.js — content path สำคัญมาก
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  // JIT เป็นค่าเริ่มต้นตั้งแต่ v3
}

// ข้อควรระวัง: อย่าสร้าง Class Name แบบ Dynamic
// ผิด (JIT จะไม่เจอ):
const color = 'red'
className = `bg-${color}-500`  // ไม่ได้! JIT scan ไม่เจอ

// ถูก:
const colorClass = {
  red: 'bg-red-500',
  blue: 'bg-blue-500',
  green: 'bg-green-500',
}[color]

// ถูก:
className = color === 'red' ? 'bg-red-500' : 'bg-blue-500'

วัดขนาด CSS

# ตรวจสอบขนาด CSS output
npx tailwindcss -o output.css --minify
ls -lh output.css

# Tailwind CSS ที่ใช้จริงมักมีขนาดเพียง 10-30KB (gzipped)
# เทียบกับ Bootstrap ~230KB ที่ต้องโหลดทั้งหมด

# วิเคราะห์ CSS ที่ไม่ได้ใช้
npx purgecss --css output.css --content './src/**/*.tsx' --output purged.css

DaisyUI และ shadcn/ui

DaisyUI

DaisyUI เป็น Component Library ที่สร้างบน Tailwind CSS ให้ Class ที่มีความหมาย เช่น btn, card, modal โดยไม่ต้องเขียน Utility Classes ยาวๆ มาพร้อม Theme สำเร็จรูปหลายแบบ

npm install daisyui

// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake', 'cyberpunk'],
  },
}

<!-- DaisyUI Components -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline btn-secondary">Outline Button</button>

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="photo.jpg" alt="Photo" /></figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Description</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

<!-- เปลี่ยน Theme -->
<html data-theme="cyberpunk">...</html>

shadcn/ui

shadcn/ui ไม่ใช่ Library แต่เป็น Collection of Components ที่คุณ Copy มาใส่โปรเจกต์ ใช้ Radix UI + Tailwind CSS คุณเป็นเจ้าของ Code ทั้งหมดและแก้ไขได้อิสระ เป็นที่นิยมมากในชุมชน React และ Next.js

# ติดตั้ง shadcn/ui
npx shadcn@latest init

# เพิ่ม Component ที่ต้องการ
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

// ใช้งาน
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Welcome back!</p>
        <Button variant="default">Action</Button>
        <Button variant="outline">Cancel</Button>
        <Button variant="destructive">Delete</Button>
      </CardContent>
    </Card>
  )
}

Tailwind CSS กับ Arbitrary Values

เมื่อ Tailwind ไม่มี Class ที่คุณต้องการ คุณสามารถใช้ Arbitrary Values ด้วยวงเล็บเหลี่ยม [] ได้ ทำให้ไม่จำเป็นต้องเขียน Custom CSS เลย

<!-- Arbitrary Values -->
<div class="w-[350px] h-[calc(100vh-80px)]">Custom size</div>
<div class="bg-[#1a1a2e]">Custom color</div>
<div class="grid-cols-[200px_1fr_100px]">Custom grid</div>
<div class="text-[clamp(1rem,2.5vw,2rem)]">Fluid font size</div>
<div class="top-[var(--header-height)]">CSS variable</div>

<!-- Arbitrary Properties (ใช้ CSS Property ใดก็ได้) -->
<div class="[mask-type:luminance]">Custom property</div>
<div class="[text-wrap:balance]">Balanced text</div>

<!-- Arbitrary Variants -->
<div class="[&:nth-child(3)]:bg-blue-500">3rd child</div>
<div class="[@supports(display:grid)]:grid">If grid supported</div>

Real-World Component ตัวอย่าง

<!-- Pricing Card -->
<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden
            border border-gray-100 hover:shadow-xl transition-shadow duration-300">
  <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-8 text-center">
    <h3 class="text-white text-xl font-semibold">Pro Plan</h3>
    <div class="mt-4">
      <span class="text-5xl font-bold text-white">$29</span>
      <span class="text-blue-200 text-lg">/month</span>
    </div>
  </div>
  <div class="px-6 py-8">
    <ul class="space-y-4">
      <li class="flex items-center gap-3">
        <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
        </svg>
        <span class="text-gray-700">Unlimited Projects</span>
      </li>
      <li class="flex items-center gap-3">
        <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
        </svg>
        <span class="text-gray-700">Priority Support</span>
      </li>
    </ul>
    <button class="w-full mt-8 py-3 bg-blue-600 text-white rounded-xl font-semibold
                   hover:bg-blue-700 transition-colors focus:ring-4 focus:ring-blue-200">
      Get Started
    </button>
  </div>
</div>

<!-- Responsive Dashboard Layout -->
<div class="min-h-screen bg-gray-50">
  <!-- Sidebar -->
  <aside class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white
                hidden lg:block overflow-y-auto">
    <div class="p-6">
      <h2 class="text-xl font-bold">Dashboard</h2>
    </div>
    <nav class="space-y-1 px-3">
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
                        bg-gray-800 text-white">Home</a>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
                        text-gray-400 hover:bg-gray-800 hover:text-white
                        transition-colors">Settings</a>
    </nav>
  </aside>
  <!-- Main Content -->
  <main class="lg:ml-64 p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
      <!-- Stat Cards -->
    </div>
  </main>
</div>

Best Practices สำหรับ Tailwind CSS

จากประสบการณ์การใช้ Tailwind CSS ในโปรเจกต์จริง มีหลักปฏิบัติสำคัญหลายข้อที่ช่วยให้ Code มีคุณภาพดีและ Maintain ง่าย

ใช้ Component Abstraction: สร้าง React/Vue Component แทนการใช้ @apply เพราะ Component ให้ทั้ง Styling และ Logic ในที่เดียวกัน
จัดเรียง Class ให้เป็นระเบียบ: ใช้ Prettier plugin ของ Tailwind เพื่อจัดเรียง Class อัตโนมัติ ติดตั้งด้วย npm install prettier-plugin-tailwindcss
อย่าสร้าง Class Name แบบ Dynamic: JIT scan หาไม่เจอ ใช้ Object mapping หรือ Conditional ternary แทน
ใช้ Design Tokens: กำหนดสี, Font, Spacing ใน Config แทนการใช้ Arbitrary Values ทุกที่ เพื่อความ Consistent
ใช้ cn() utility: ใช้ clsx + twMerge เพื่อจัดการ Conditional Classes ได้สะอาด
ตั้งค่า Content Path ให้ถูก: ถ้าลืม Path จะทำให้ Class ไม่ถูก Generate

// cn() utility สำหรับ Conditional Classes
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// ใช้งาน
<button className={cn(
  'px-4 py-2 rounded font-medium',
  variant === 'primary' && 'bg-blue-600 text-white',
  variant === 'secondary' && 'bg-gray-200 text-gray-800',
  disabled && 'opacity-50 cursor-not-allowed',
  className  // รับ className จากข้างนอก
)}>
  {children}
</button>

สรุป

Tailwind CSS เปลี่ยนวิธีเขียน CSS ไปอย่างสิ้นเชิง จาก Semantic Class Names ที่ต้องคิดชื่อ มาเป็น Utility-First ที่ประกอบ Style ตรงใน Template ได้เลย ทำให้พัฒนา UI ได้เร็วขึ้นมาก CSS ไม่บวม และ Design สม่ำเสมอ

ในปี 2026 Tailwind CSS พร้อมกับ Modern CSS Features อย่าง Container Queries, :has() Selector, CSS Nesting และ View Transitions ทำให้ Frontend Development มีเครื่องมือที่ทรงพลังกว่าที่เคย ไม่ว่าคุณจะใช้ React, Vue, Svelte หรือแม้แต่ Static HTML ก็สามารถใช้ Tailwind CSS ได้ทั้งหมด

เริ่มต้นวันนี้ ติดตั้ง Tailwind CSS ในโปรเจกต์ของคุณ ลองเขียน Component สักสองสาม ชิ้น แล้วคุณจะเข้าใจว่าทำไม Developer ทั่วโลกถึงหันมาใช้ Tailwind CSS กันมากขึ้นเรื่อยๆ