Tailwind CSS — เขียน CSS โดยไม่ต้องตั้งชื่อ class

1 · ปัญหาที่ Tailwind มาแก้ ไม่ใช่ปัญหา "CSS ยาก"

ย้อนกลับไปที่บท 59–62 คุณทำแบบนี้เพื่อจะได้ปุ่มหนึ่งปุ่ม:

/* styles.css — ไฟล์หนึ่ง */
.primary-button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid transparent;
}

<!-- index.html — อีกไฟล์หนึ่ง -->
<button class="primary-button">กดฉัน</button>

โค้ดนี้ไม่มีอะไรผิดเลย มันทำงานได้ดี — แต่พอโปรเจกต์โตขึ้น มันเรียกเก็บ "ค่าธรรมเนียม" สามอย่างจากคุณทุกวัน:

1. คุณต้องคิดชื่อ — .primary-button? .btn-main? .button--primary? ชื่อไม่มีผลต่อหน้าเว็บเลยสักนิด แต่กินเวลาคิดจริง และทีมเถียงกันเรื่องนี้ได้เป็นชั่วโมง
2. คุณต้องสลับไฟล์ไปมา — อยากรู้ว่าปุ่มนี้หน้าตายังไง ต้องไปเปิดอีกไฟล์ แล้วค้นหาชื่อคลาส
3. คุณลบของทิ้งไม่กล้า — จะลบ .primary-button ทิ้ง ต้องมั่นใจว่าไม่มีหน้าไหนในโปรเจกต์ใช้อยู่ ผลคือไฟล์ CSS มีแต่โตขึ้น ไม่มีวันเล็กลง

Tailwind ตอบทั้งสามข้อด้วยวิธีเดียว: ไม่ต้องตั้งชื่ออะไรเลย ใช้ชื่อที่มันเตรียมไว้ให้ แล้วชื่อพวกนั้นก็คือชื่อของ CSS property ตรง ๆ

<button className="px-2.5 py-1.5 rounded-md border-2 border-transparent">
  กดฉัน
</button>

สองก้อนข้างบนนี้ให้ผลเหมือนกันเป๊ะ ต่างกันแค่ว่าก้อนหลังไม่มีไฟล์ CSS ที่คุณต้องดูแล และไม่มีชื่อที่คุณต้องคิด

2 · utility class ไม่ใช่ภาษาใหม่ — มันคือ CSS ที่เขียนไว้ให้แล้ว

นี่คือประโยคสำคัญที่สุดของบทนี้: flex ไม่ใช่คำสั่งวิเศษ มันคือชื่อของกฎ CSS หนึ่งกฎ ที่หน้าตาแบบนี้เป๊ะ ๆ

.flex {
  display: flex;
}

บรรทัดข้างบนนี้ผมไม่ได้พิมพ์เอง — ผมเปิดไฟล์ CSS ที่โปรเจกต์นี้สร้างขึ้นมาจริงแล้วก็อปออกมา ทำแบบเดียวกันกับคลาสที่ใช้บ่อยที่สุด ได้ตารางนี้:

อ่านตารางนี้จบแล้วคุณจะเห็นว่า ไม่มีอะไรใหม่ให้เรียนเลยสักบรรทัด ทุกฝั่งขวาคือ CSS จากบท 59–62 ทั้งหมด · สิ่งเดียวที่ต้องเรียนคือวิธีย่อ

--spacing: .25rem;

ตัวเลขที่ไม่ได้ใช้ --spacing ก็มี เช่นสีกับขนาดตัวอักษร ซึ่งเป็นตัวแปรของมันเอง:

/* ก็อปจากไฟล์ CSS ที่โปรเจกต์สร้างจริง */
--spacing: .25rem;
--text-base: 1rem;
--text-sm: .875rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--font-weight-bold: 700;
--color-red-500: #fb2c36;
--color-gray-900: #101828;
--default-transition-duration: .15s;

3 · Tailwind เข้ามาในโปรเจกต์ยังไง — PostCSS กับ import บรรทัดเดียว

Tailwind ไม่ใช่ไฟล์ CSS สำเร็จรูปที่แจกมาแล้วคุณลิงก์เอา มันเป็นโปรแกรมที่รันตอน build แล้วเขียนไฟล์ CSS ขึ้นมาให้ โปรแกรมนั้นเสียบเข้ากับระบบชื่อ PostCSS

ในโปรเจกต์ที่ create-next-app สร้างให้ มันตั้งค่าไว้ให้เรียบร้อยแล้วสองที่ — ไฟล์แรกคือ postcss.config.mjs:

// postcss.config.mjs — ก็อปจากโปรเจกต์จริง ไม่ได้แก้อะไรเลย
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

ไฟล์ที่สองคือ app/globals.css ซึ่งบรรทัดแรกสุดของมันคือทั้งหมดที่ต้องมี:

/* app/globals.css — ก็อปจากโปรเจกต์จริง ตรงกับสไลด์หน้า 27 */
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}
/* …ที่เหลือคือ CSS ปกติของคุณ เขียนต่อได้ตามใจ */

บล็อก @theme คือที่เดียวที่ใช้ตั้งค่า Tailwind ใน v4 — มันมาแทน tailwind.config.js ของ v3 ทั้งไฟล์ · อยากเปลี่ยน --spacing เปลี่ยนสี เพิ่มฟอนต์ ก็เขียนเป็น CSS variable ลงในบล็อกนี้ (คำว่า inline ที่ต่อท้ายเป็นตัวเลือกเสริม บอกให้ token อ้างตัวแปรอื่นต่อได้ ซึ่งจำเป็นตรงนี้เพราะ --background เปลี่ยนค่าตามโหมดมืด)

แล้ว globals.css ถูก import เข้ามาที่ app/layout.tsx ทีเดียว ครอบทุกหน้า (นี่คือเหตุผลที่คุณใช้ Tailwind ในหน้าไหนก็ได้โดยไม่ต้อง import ซ้ำ)

คุณพิมพ์ในไฟล์ .tsx                Tailwind (ทำงานตอน build)              เบราว์เซอร์ได้
─────────────────────           ──────────────────────────────         ─────────────────

className="p-4 flex"   ──┐
className="text-sm"    ──┤       1. อ่าน "ตัวอักษร" ในไฟล์โปรเจกต์
className="rounded-md" ──┘          หาคำที่หน้าตาเหมือนชื่อ utility
                                              │
                                              ▼
app/globals.css                  2. เห็น @import "tailwindcss"
  @import "tailwindcss";   ────►     → รู้ว่าต้องสร้าง CSS ตรงนี้
                                              │
                                              ▼
postcss.config.mjs               3. PostCSS เรียก @tailwindcss/postcss     .p-4        { … }
  "@tailwindcss/postcss"   ────►     ให้แปลงไฟล์ CSS               ────►   .flex       { … }
                                                                          .text-sm    { … }
                                                                          .rounded-md { … }
                                                                          ▲
                                     สร้าง "เฉพาะคลาสที่เจอ" เท่านั้น ────┘

ขั้นที่ 1 คือขั้นที่คนพลาดกันมากที่สุด และผมจะพิสูจน์ให้ดูในหัวข้อ 6 — Tailwind อ่านโค้ดของคุณในฐานะ "ตัวอักษร" ไม่ใช่ในฐานะ "โปรแกรมที่รันแล้ว" มันไม่รู้ว่าตัวแปรของคุณมีค่าอะไร มันรู้แค่ว่าในไฟล์มีคำว่าอะไรบ้าง

4 · เวอร์ชัน — สไลด์กับโปรเจกต์จริงตรงกัน แต่อินเทอร์เน็ตไม่ตรง

ถ้าเผลอเอาไวยากรณ์ v3 มาใช้ในโปรเจกต์ v4 จะเกิดอะไรขึ้น

ผมสร้างไฟล์ old.css ที่ใส่ไวยากรณ์ v3 ล้วน ๆ แล้ว import เข้าหน้าหนึ่ง แล้วเปิดหน้านั้นดู:

/* app/t72/v3style/old.css — ไวยากรณ์ v3 ในโปรเจกต์ v4 */
@tailwind base;
@tailwind components;
@tailwind utilities;

ผลจริงที่ได้ ตรงข้ามกับที่หลายคนคาด:

ผลนี้แย่กว่าพังไปเลย — ถ้ามันขึ้น error คุณจะรู้ทันทีว่าต้องแก้ตรงไหน แต่มันดัน "ทำงานได้ครึ่งเดียว": คลาสที่ไม่ต้องพึ่ง token อย่าง .flex ยังมา ส่วนคลาสที่ต้องคำนวณจาก --spacing อย่าง .p-4 หายไปเงียบ ๆ
คุณจะนั่งงงว่า "ทำไม flex ติดแต่ padding ไม่ติด" อยู่ครึ่งชั่วโมง

บทเรียน: ถ้าเจอหน้าที่สไตล์มาบ้างไม่มาบ้าง ให้เช็คไวยากรณ์เวอร์ชันก่อนเช็คอย่างอื่น

5 · เอาไปใช้จริง — ใส่สไตล์ให้ Button ของบท 71

สไลด์หน้า 28 เอา Button จากบท 71 มาใส่คลาส Tailwind ผมพิมพ์ตามสไลด์แล้วรันจริง ได้แบบนี้:

// components/Bases/Button.tsx
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: ButtonProps) => {
  const { children, ...restProps } = props;
  return (
    <button
      className={`px-2.5 py-1.5
        text-base text-[#aa3bff] bg-[rgba(170,59,255,0.1)]
        border-2 hover:border-[rgba(170,59,255,0.5)] border-transparent rounded-md
        transition-colors duration-300`}
      {...restProps}
    >
      {children}
    </button>
  );
};

export default Button;

เรียกใช้แบบเดิมเป๊ะ — คนใช้ไม่ต้องรู้เลยว่าข้างในเป็น Tailwind:

<Button
  type="button"
  onClick={() => console.log("CLICKED !")}
>
  Test Button
</Button>

HTML ที่เซิร์ฟเวอร์ส่งออกมาจริง (ดึงด้วย curl):

<button class="px-2.5 py-1.5
        text-base text-[#aa3bff] bg-[rgba(170,59,255,0.1)]
        border-2 hover:border-[rgba(170,59,255,0.5)] border-transparent rounded-md
        transition-colors duration-300" type="button">Test Button</button>

สองอย่างในโค้ดนี้ที่ต้องอธิบาย

อย่างแรก — วงเล็บเหลี่ยม [...] คือ "ค่าที่ฉันขอกำหนดเอง"
Tailwind ไม่มีสีชื่อ #aa3bff เตรียมไว้ให้ คุณจึงยัดค่าดิบเข้าไปในวงเล็บเหลี่ยม แล้วมันสร้างกฎให้ตอน build เลย ของจริงในไฟล์ CSS ออกมาแบบนี้:

.text-\[\#aa3bff\] {
  color: #aa3bff;
}

.bg-\[rgba\(170\,59\,255\,0\.1\)\] {
  background-color: #aa3bff1a;
}

สังเกตว่ามันแปลง rgba(170,59,255,0.1) เป็น #aa3bff1a ให้เอง (ค่าเดียวกัน เขียนสั้นกว่า) · ส่วน \ เต็มไปหมดคือการ escape เพราะ # [ ( เป็นอักขระพิเศษใน CSS selector

อย่างที่สอง — ลำดับคลาสใน className ไม่มีความหมายเลย
ในโค้ดข้างบน hover:border-[rgba(170,59,255,0.5)] ถูกเขียนก่อน border-transparent ถ้าคิดแบบ CSS ปกติ คุณอาจกลัวว่า border-transparent จะมาทับตอน hover
แต่ไม่เกิดขึ้น เพราะสิ่งที่ตัดสินคือลำดับในไฟล์ CSS ไม่ใช่ลำดับที่คุณพิมพ์ใน HTML — ผมไปดูไฟล์จริงมา:

/* บรรทัดที่ 614 ของไฟล์ CSS ที่ผมดึงมา */
.border-transparent {
  border-color: #0000;
}

/* บรรทัดที่ 824–827 — มาทีหลังตั้ง 200 บรรทัด และมี :hover เพิ่ม specificity ด้วย */
@media (hover: hover) {
  .hover\:border-\[rgba\(170\,59\,255\,0\.5\)\]:hover {
    border-color: #aa3bff80;
  }
}

เลขบรรทัดในไฟล์ของคุณจะไม่ตรงกับของผม เพราะมันขึ้นกับว่าโปรเจกต์คุณใช้คลาสอะไรบ้าง · สิ่งที่ต้องดูคือ "อันไหนอยู่ก่อน อันไหนอยู่หลัง" ไม่ใช่ตัวเลข

Tailwind เรียงลำดับกฎให้เองตอน build โดยเอา variant อย่าง hover: ไว้ท้ายเสมอ คุณจึงพิมพ์คลาสสลับกันยังไงก็ได้ ผลเหมือนเดิม

6 · กับดักที่ทำให้สไตล์หายเงียบ ๆ — ชื่อคลาสที่สร้างจากตัวแปร

นี่คือบั๊ก Tailwind อันดับหนึ่งที่คนใหม่เจอ และมันไม่มี error ให้เห็นแม้แต่ตัวเดียว
ผมเขียนหน้านี้แล้วรันจริงบน dev server ลองทายก่อนกดเฉลย:

// app/t72/dynamic/page.tsx
export default function Page() {
  const color = "blue";
  const shade = 600;
  return (
    <div className="p-4">
      <p className={`text-${color}-${shade}`}>สร้างชื่อคลาสด้วยการต่อสตริง</p>
      <p className="text-green-700">เขียนชื่อคลาสเต็ม ๆ ตรง ๆ</p>
    </div>
  );
}

# HTML ที่ส่งออกมา — คลาสอยู่ครบนะ
class="text-blue-600"
class="text-green-700"

# แต่ในไฟล์ CSS ที่ Tailwind สร้าง นับจำนวนครั้งที่เจอคำนั้น
text-blue-600   -> 0
text-green-700  -> 1

# กฎของ text-green-700 ที่มีอยู่จริง
.text-green-700 { color: var(--color-green-700); }
# โดยที่ --color-green-700: #008138;

วิธีแก้: เขียนชื่อคลาสให้ครบทุกตัวไว้ในโค้ด แล้วค่อยเลือกทีหลัง

const color = "blue";
<p className={`text-${color}-600`}>

const colors = {
  blue:  "text-blue-600",
  green: "text-green-700",
};
<p className={colors[color]}>

7 · ทวนความเข้าใจ

8 · ภารกิจ — พิสูจน์ด้วยไฟล์ CSS จริง ไม่ใช่ด้วยสายตา

อ้างอิง

• Tailwind CSS — Styling with utility classes — อ่านหัวข้อ Why not just use inline styles? ซึ่งตอบคำถามที่คุณน่าจะกำลังคิดอยู่ว่า "ถ้าจะยัดสไตล์ใส่ tag แบบนี้ ใช้ style= ไปเลยไม่ดีกว่าเหรอ" · คำตอบสั้น ๆ คือ style= ทำ hover: กับ sm: ไม่ได้ และไม่ผูกกับ design token
• Tailwind CSS — Detecting classes in source files — อ่านหัวข้อ Dynamic class names ซึ่งเป็นเอกสารทางการของกับดักในหัวข้อ 6 ของบทนี้เป๊ะ ๆ เขาเขียนไว้ตรง ๆ ว่าชื่อคลาสต้องปรากฏเป็นสตริงเต็มในไฟล์ ไม่งั้นไม่ถูกสร้าง
• Tailwind CSS — Theme variables — อ่านตาราง Theme variable namespaces เพื่อดูว่า --spacing --color-* --text-* --radius-* แต่ละกลุ่มไปควบคุม utility ตัวไหนบ้าง · นี่คือแผนที่ที่ใช้แทน tailwind.config.js ของ v3
• Tailwind CSS — Upgrade guide (v3 → v4) — อ่านหัวข้อ Changes from v3 ตอนที่คุณค้นเจอบทความเก่าแล้วไม่แน่ใจว่าต้องแปลงอะไรบ้าง · โดยเฉพาะย่อหน้าเรื่อง CSS-first configuration ที่อธิบายว่าทำไมไฟล์ config ถึงหายไป
• Next.js — CSS — อ่านหัวข้อ Global CSS ให้เห็นว่าทำไม globals.css ต้องถูก import ที่ app/layout.tsx ไฟล์เดียว แล้วมันครอบทุกหน้าได้ยังไง
• PostCSS — อ่านแค่ย่อหน้าแรกของหน้าแรกก็พอ ให้เห็นภาพว่ามันคือ "เครื่องมือแปลง CSS ด้วย JavaScript" แล้ว Tailwind เป็นเพียง plugin ตัวหนึ่งของมัน — ไม่ต้องลงลึกกว่านี้ในตอนนี้