Tailwind v4 และ daisyUI — และกับดักชื่อคลาสที่ต่อ string

Tailwind ในแอป Rails อยู่ตรงไหน — เปิดไฟล์ตั้งค่าของจริง

ทวนจากบท 72 ครึ่งย่อหน้า: เราเขียนคลาสอย่าง font-bold ใน view · Tailwind อ่านไฟล์ทุกไฟล์ในโปรเจกต์เป็นตัวหนังสือ แล้วเขียน CSS เฉพาะคลาสที่เจอลงไฟล์เดียว · ไฟล์ CSS จึงเล็ก เพราะไม่มีคลาสที่ไม่มีใครใช้

ใน Next.js เราได้ Tailwind ผ่าน PostCSS และ npm · ใน Rails ใช้ gem tailwindcss-rails ซึ่งพกโปรแกรม Tailwind มาเป็นไฟล์เดียว ไม่ต้องมี Node ไม่ต้องมี npm · ทางเดินของมันมีแค่นี้:

อ่านแผนภาพ: app/views/**/*.erb = "ไฟล์ .erb ทุกไฟล์ ในทุกโฟลเดอร์ย่อยของ app/views" (** = ลงไปกี่ชั้นก็ได้) · ลูกศรขวาคือทางที่ CSS เดินต่อ · ลูกศรขึ้นจากด้านล่างคือไฟล์ตั้งค่าที่บอกว่าให้ Tailwind ทำอะไร

ไฟล์ตั้งค่า (ใบสั่งงาน) ของ Tailwind คือ app/assets/tailwind/application.css · เปิดดูของจริงในแอป (สถานะหลังบท 126):

/* app/assets/tailwind/application.css */
@import "tailwindcss";
@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs";

@theme {
  --font-sans: "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
}

อ่านทีละบรรทัด:

• @import "tailwindcss"; = "เอา Tailwind ทั้งชุดมาใช้" · บรรทัดเดียวกับใน globals.css ของ Next.js (บท 72) เป๊ะ
• @source not "./daisyui{,*}.mjs"; = "อย่าอ่านไฟล์ daisyui.mjs กับ daisyui-ตัวอะไรก็ได้.mjs" ({,*} แปลว่า "ไม่มีอะไรต่อ หรือมีอะไรต่อก็ได้") · สองไฟล์นี้เป็นโค้ดของ daisyUI ที่มีชื่อคลาสทุกตัวของมันอยู่ข้างใน · ผมลองลบบรรทัดนี้แล้ว build ไฟล์ CSS โตจาก 34,146 เป็น 380,038 byte (มี .modal ที่เราไม่เคยใช้โผล่มาด้วย)
• @plugin "./daisyui.mjs"; = "เสียบส่วนเสริม daisyUI จากไฟล์ข้าง ๆ นี้" · เดี๋ยวดูละเอียดในหัวข้อ daisyUI
• @theme { … } = ที่ตั้งค่าของร้านเรา · ข้างในเป็นตัวแปร CSS (ชื่อขึ้นต้นด้วย -- ใช้เก็บค่าไว้ใช้ซ้ำ · เคยเห็นในบท 81) · ตอนนี้มีค่าเดียวคือ --font-sans (ฟอนต์หลัก) — ลองใช้ฟอนต์ "Noto Sans Thai" ก่อน · เครื่องไหนไม่มีฟอนต์นี้ก็ข้ามไปใช้ตัวถัดไปในรายการ

แล้วสั่ง build เองหนึ่งรอบ (เปิด terminal ที่โฟลเดอร์โปรเจกต์):

$ bin/rails tailwindcss:build
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 81ms

บรรทัดแรกบอกรุ่นของ Tailwind · บรรทัดดอกไม้บอกว่า daisyUI ถูกเสียบเข้ามาแล้ว · Done in 81ms = เสร็จใน 0.08 วินาที (ของคุณจะต่างนิดหน่อย)
ผลลัพธ์ไปอยู่ที่ app/assets/builds/tailwind.css ซึ่งอยู่ใน .gitignore (ไฟล์รายชื่อของที่ git ไม่ต้องเก็บ) · Tailwind ข้ามไฟล์ในรายชื่อนั้นด้วย จึงไม่อ่านผลงานของตัวเองวนไปมา

v3 กับ v4 — ไม่มี tailwind.config.js แล้ว และทำไมต้องบอก AI

บท 72 เทียบไว้แล้วว่า Tailwind v3 ตั้งค่าในไฟล์ JavaScript ชื่อ tailwind.config.js · v4 ย้ายทุกอย่างมาอยู่ในไฟล์ CSS · ในแอป Rails ของเราหน้าตาเป็นแบบนี้ (สมมติอยากได้สีประจำร้านชื่อ brand):

// tailwind.config.js
module.exports = {
  content: ["./app/views/**/*.erb"],
  theme: { extend: { colors: {
    brand: "#ff3d7f"
  } } },
}

/* app/assets/tailwind/application.css */
@theme {
  --font-sans: "Noto Sans Thai", …;
  --color-brand: #ff3d7f;
}
/* แล้วใช้ class="text-brand" ได้เลย */

ฝั่งซ้ายเป็น JavaScript: module.exports = { … } = "ส่งก้อนตั้งค่านี้ออกไปให้โปรแกรมอื่นใช้" · content = รายชื่อไฟล์ที่ให้อ่าน · extend.colors = "เพิ่มสีนี้ต่อจากสีมาตรฐาน" · ไม่ต้องจำ แค่จำหน้าตาไว้ — เห็นแบบนี้ในคำตอบของ AI หรือในเว็บ = ของ v3

ฝั่ง v4 ไม่ต้องบอก content (ไฟล์ไหนให้อ่าน) เพราะมันอ่านทุกไฟล์เอง · ชื่อตัวแปรมีแบบแผน: --color- นำหน้า = สี · ได้คลาส text-brand bg-brand border-brand มาทันที
ลองจริง: เพิ่มบรรทัด --color-brand: #ff3d7f; ใน @theme ตามฝั่งขวา แล้ว build

$ bin/rails tailwindcss:build
$ grep -c -- '--color-brand' app/assets/builds/tailwind.css

≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 78ms
0

-    <h1 class="font-bold text-3xl sm:text-4xl">บทความทั้งหมด</h1>
+    <h1 class="font-bold text-3xl sm:text-4xl text-brand">บทความทั้งหมด</h1>

$ bin/rails tailwindcss:build
$ grep -o -- '--color-brand:[^;}]*' app/assets/builds/tailwind.css
--color-brand:#ff3d7f
$ grep -o '\.text-brand{[^}]*}' app/assets/builds/tailwind.css
.text-brand{color:var(--color-brand)}

แล้วถ้าทำตามเว็บเก่า ๆ สร้าง tailwind.config.js ล่ะ? ผมสร้างไฟล์นี้ที่โฟลเดอร์บนสุดของโปรเจกต์ ตั้งสีชื่อ mint แล้วใส่ text-mint ใน <h1> เดิม:

// tailwind.config.js — ไฟล์ทดลอง ลบทิ้งหลังลอง
module.exports = {
  content: ["./app/views/**/*.html.erb"],
  theme: { extend: { colors: { mint: "#3eb489" } } },
}

$ bin/rails tailwindcss:build
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 88ms
$ grep -c 'text-mint' app/assets/builds/tailwind.css
0

ไม่มี error สักบรรทัด · build ผ่าน · แต่สีไม่มา · v4 ไม่เปิดไฟล์นี้เลย มันวางอยู่เฉย ๆ เหมือนกระดาษที่ไม่มีใครอ่าน
นี่คือเหตุผลที่ prompts/00-context.md ของแอปนี้มีบรรทัดนี้อยู่แล้ว (เปิดดูได้ — บท 121 พาอ่านไปแล้ว):

- tailwindcss-rails (Tailwind v4) + daisyUI 5 ผ่าน @plugin ในไฟล์ CSS
  ห้ามสร้าง tailwind.config.js — Tailwind v4 ไม่อ่านไฟล์นั้น

AI ฝึกจากเนื้อหาในอินเทอร์เน็ต · v3 อยู่มาหลายปี ตัวอย่างเยอะกว่า v4 มาก · ถ้าไม่บอก มันมีโอกาสสูงที่จะตอบแบบ v3 ("สร้าง tailwind.config.js แล้วใส่ content") · เราทำตาม → ไม่มี error → นั่งงงว่าทำไมสีไม่มา · บรรทัดเดียวใน 00-context.md ตัดปัญหานี้ทิ้งทั้งก้อน

daisyUI 5 — ชุดจานชามสำเร็จรูปที่วางบน Tailwind

Tailwind ให้อิฐทีละก้อน · ปุ่มหนึ่งปุ่มต้องเรียงคลาสยาว ๆ เอง · daisyUI คือส่วนเสริม (plugin) ที่ตั้งชื่อให้ชุดคลาสที่ใช้บ่อย เช่น btn = หน้าตาปุ่มทั้งชุด · btn-primary = ปุ่มสีหลักของร้าน · มีทั้ง card · navbar · badge · alert ฯลฯ (สไลด์อ้างว่าราว 60 ตัว) และใช้ CSS ล้วน ไม่มี JavaScript

<button class="px-4 py-2 rounded-lg bg-blue-600
  text-white font-medium hover:bg-blue-700
  focus:ring-2 focus:ring-blue-400
  disabled:opacity-50 transition">
  บันทึก
</button>

<button class="btn btn-primary">บันทึก</button>

<%# ผสมกับคลาส Tailwind ได้ตามสบาย %>
<button class="btn btn-primary w-full mt-4">
  บันทึก
</button>

ฝั่งซ้าย: px-4 py-2 = ระยะในซ้ายขวา/บนล่าง · rounded-lg = มุมมน · hover: focus: disabled: = ใช้คลาสนี้เฉพาะตอนเมาส์ชี้/ตอนถูกเลือก/ตอนกดไม่ได้ (บท 72) · ring-2 = เส้นขอบเรืองรอบปุ่ม · opacity-50 = จางลงครึ่งหนึ่ง · transition = เปลี่ยนสีแบบนุ่ม ๆ ไม่กระตุก
ฝั่งขวาได้ของพวกนี้ครบในสองคำ · w-full mt-4 ต่อท้าย = คลาส Tailwind ธรรมดา ใช้ปนกันได้ · <%# %> = คอมเมนต์ของ ERB (บท 122)

daisyUI ในแอปนี้มาเป็นไฟล์ ไม่ได้ลงด้วย npm · ls app/assets/tailwind แล้วเจอ:

$ ls app/assets/tailwind
application.css
daisyui-theme.mjs
daisyui.mjs
$ ls tailwind.config.js package.json node_modules
ls: node_modules: No such file or directory
ls: package.json: No such file or directory
ls: tailwind.config.js: No such file or directory

daisyui.mjs คือตัว daisyUI ทั้งก้อนที่ก็อปมาวางในโปรเจกต์ (.mjs = ไฟล์ JavaScript ชนิดหนึ่ง · Tailwind เรียกใช้ตอน build ไม่ได้ส่งไปเบราว์เซอร์) · daisyui-theme.mjs เป็นตัวช่วยสร้างธีมของเราเอง ซึ่งแอปนี้ยังไม่ได้เรียกใช้ · การก็อป library มาเก็บในโปรเจกต์แบบนี้เรียกว่า vendor · ไม่มี package.json ไม่มี node_modules ตรงกับที่บท 127 เล่าว่าแอป Rails 8 ไม่ต้องมี Node

≈ tailwindcss v4.3.3

Error:
┌
│ Error: Can't resolve 'daisyui' in '…/app/assets/tailwind'
└
bin/rails aborted!

daisyUI ทำตามกฎฝ่ายจัดซื้อเหมือนกัน · ก่อนใส่ปุ่มในหน้าไหนเลย grep -c '\.btn-primary{' ในไฟล์ CSS ได้ 0 · พอเพิ่ม <button class="btn btn-primary"> ลงใน view แล้ว build ได้ 1 · ใช้ชิ้นไหน ได้ CSS ชิ้นนั้น ไม่ได้ยัด 60 ชิ้นมาทั้งหมด
(คำค้น \.btn-primary{ = "จุด ตามด้วยชื่อคลาส ตามด้วย {" ซึ่งคือหน้าตาของกฎ CSS ในไฟล์ · \. แปลว่าจุดจริง ๆ เพราะจุดเปล่า ๆ ใน grep แปลว่า "ตัวอะไรก็ได้")

สีตามหน้าที่ และ data-theme — เปลี่ยนธีมทั้งร้านด้วยป้ายเดียว

ทวนบท 81: bg-blue-600 = "น้ำเงินเบอร์ 600" ตายตัว · btn-primary = "สีหลักของร้าน" ซึ่งจะเป็นสีอะไรก็ขึ้นกับธีม · daisyUI ตั้งชื่อสีตามหน้าที่ไว้ชุดหนึ่ง เช่น primary (สีหลัก) · secondary · accent · base-100 (สีพื้นหลังหน้า) · base-content (สีตัวหนังสือบนพื้น)

daisyUI มีธีมสำเร็จ 35 ชุด (นับจากไฟล์ daisyui.mjs รุ่น 5.7.50 จริง) · สลับธีมด้วยการใส่ attribute data-theme ที่แท็ก <html> บนสุดของหน้า:

<html data-theme="dark">
<html data-theme="cupcake">

ผมวางปุ่มสองปุ่มไว้ใน app/views/posts/index.html.erb — ปุ่ม daisyUI กับปุ่ม Tailwind เปล่า — แล้วเปิดด้วย Chrome จริง · เปลี่ยน data-theme ทีละค่าแล้ววัดสีพื้นที่เบราว์เซอร์ใช้จริง (oklch(…) คือวิธีเขียนสีอีกแบบ เหมือน #ff3d7f · ไม่ต้องอ่านออก ดูแค่ว่าเปลี่ยนหรือไม่เปลี่ยน · ตัวเลขแรกคือความสว่าง 0–1):

<div class="my-4 flex gap-2">
  <button class="btn btn-primary">บันทึก</button>
  <button class="px-4 py-2 rounded-lg bg-blue-600 text-white">บันทึก</button>
</div>

ปุ่ม btn-primary เปลี่ยนสีตามธีม (สว่างขึ้นให้เด่นบนพื้นมืด) · ปุ่ม bg-blue-600 สีเดิมทุกแถว เพราะเราสั่งเลขสีตายตัวไว้ · ตอนเป็น dark หน้าจอจริงเห็นอีกอย่าง: คำอธิบายบทความที่เป็น text-gray-700 (เทาเข้มตายตัว) แทบจมหายไปในพื้นมืด — นี่คือเหตุผลที่ Lab บท 129 ย้ายหน้าไปใช้สีตามหน้าที่

@plugin "./daisyui.mjs" {
  themes: light --default, dark --prefersdark, synthwave;
}

$ bin/rails tailwindcss:build
$ grep -o '\[data-theme=[a-z]*\]' app/assets/builds/tailwind.css | sort | uniq -c
   1 [data-theme=dark]
   2 [data-theme=light]
   1 [data-theme=synthwave]

อ่านบล็อก themes: ทีละส่วน (ไวยากรณ์นี้ตรวจกับ daisyUI 5.7.50 ที่ติดตั้งจริงแล้ว ใช้ได้ตามสไลด์หน้า 30):

• themes: ตามด้วยรายชื่อธีมคั่นด้วย , ปิดด้วย ; = เปิดเฉพาะธีมเหล่านี้
• light --default = ธีมที่ใช้เมื่อไม่ได้ใส่ data-theme
• dark --prefersdark = ถ้าเครื่องผู้ใช้ตั้งโหมดมืดไว้ และไม่ได้ใส่ data-theme ให้ใช้ธีมนี้ · ผมตั้ง Chrome ให้ "เครื่องเป็นโหมดมืด" แล้วเปิดหน้า: ไม่ต้องใส่อะไร ปุ่มได้ oklch(0.58 0.233 277.117) = สีของ dark
• เขียนแค่ light --default, dark --prefersdark; ได้ไฟล์ CSS เหมือนไม่เขียนเลยทุกไบต์ (ผมเทียบด้วย cmp แล้ว) — เพราะนั่นคือค่าเริ่มต้นอยู่แล้ว · เขียนไว้ให้คนอ่านรู้ว่าเปิดธีมอะไร

อยากลองเปลี่ยนธีมเองโดยยังไม่แก้ไฟล์: เปิดหน้า /posts ใน Chrome → กด F12 (หรือ คลิกขวา → Inspect) → แท็บ Console → พิมพ์:

document.documentElement.setAttribute("data-theme", "dark")

document.documentElement = แท็ก <html> ของหน้านี้ · setAttribute("ชื่อ", "ค่า") = ใส่ attribute ให้แท็กนั้น · กด Enter แล้วหน้าเปลี่ยนเป็นโหมดมืดทันที · refresh แล้วกลับเป็นเหมือนเดิม เพราะเราแก้แค่ในเบราว์เซอร์ (ปุ่มสลับธีมที่จำค่าได้ทำใน Lab บท 129)

★ กับดักชื่อคลาสที่ต่อ string — ฉบับ ERB

บท 72 หัวข้อ 6 เจอกับดักนี้ใน React แล้ว: className={`text-${color}-600`} สีหาย · ใน ERB หน้าตาต่างกันนิดเดียว แต่เป็นเรื่องเดียวกันทุกอย่าง · และเป็นโค้ดที่ AI เขียนให้บ่อยมาก เพราะมันดูฉลาดและสั้น

ลองใน app/views/posts/_post.html.erb (แม่พิมพ์บทความหนึ่งชิ้น จากบท 126) · อยากให้ชื่อหมวด "ของหวาน" เป็นสีชมพู หมวดอื่นน้ำเงิน:

-    <span class="font-medium text-blue-700"><%= post.category.name %></span>
+    <% color = post.category.slug == "desserts" ? "pink" : "blue" %>
+    <span class="font-medium text-<%= color %>-700"><%= post.category.name %></span>

    <span class="font-medium text-blue-700">เครื่องดื่ม</span>
    <span class="font-medium text-blue-700">อาหารริมทาง</span>
    <span class="font-medium text-pink-700">ของหวาน</span>

$ grep -c 'text-pink-700' app/assets/builds/tailwind.css
0
$ grep -c 'text-blue-700' app/assets/builds/tailwind.css
0

เหตุผลเดียวกับเรื่องฝ่ายจัดซื้อตั้งแต่ต้นบท: Tailwind อ่านไฟล์เป็นตัวหนังสือ ไม่ได้รันโค้ดของเรา · สิ่งที่มันเห็นในไฟล์คือ text-<%= color %>-700 ซึ่งไม่ใช่ชื่อคลาสอะไรเลย · คำว่า text-pink-700 เพิ่งเกิดตอน Rails เติมแม่แบบ ซึ่งตอนนั้นไฟล์ CSS ถูกสร้างเสร็จไปนานแล้ว

ท่าที่ถูก — เขียนชื่อคลาสเต็มทุกตัว แล้วค่อยเลือก:

<% color_class = post.category.slug == "desserts" ? "text-pink-700" : "text-blue-700" %>
<span class="font-medium <%= color_class %>"><%= post.category.name %></span>

$ grep -c 'text-pink-700' app/assets/builds/tailwind.css
1
$ grep -c 'text-blue-700' app/assets/builds/tailwind.css
1

ตอนนี้คำ "text-pink-700" กับ "text-blue-700" อยู่ในไฟล์เป็นตัวหนังสือครบทั้งคำ ฝ่ายจัดซื้อเห็นทั้งคู่ · Chrome วัดได้ชมพู oklch(0.525 0.223 3.958) · น้ำเงิน oklch(0.488 0.243 264.376)

$ git grep -n -e "text-red-500" -e "text-green-500" app/views
app/views/categories/_form.html.erb:3:    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
app/views/categories/index.html.erb:5:    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
…

หลักการที่กว้างกว่า Tailwind: เครื่องมือที่ "อ่านโค้ดโดยไม่รันมัน" (static analysis) มองไม่เห็นของที่โปรแกรมประกอบขึ้นตอนรันเสมอ · ต่อไปเจอเครื่องมือไหนที่ "อ่านไฟล์แล้วเลือกเก็บของ" ให้ถามตัวเองว่ามันเห็นชื่อเต็มไหม

หาจุดต่อ string ในโปรเจกต์ทีเดียวทั้งหมดได้ด้วยคำสั่งนี้ (ลองกับโค้ดที่ผิดข้างบน):

$ git grep -n -E '[a-z]-(<%=|#\{)' app/views
app/views/posts/_post.html.erb:5:    <span class="font-medium text-<%= color %>-700"><%= post.category.name %></span>

แปลว่า "หาบรรทัดใน app/views ที่มีตัวอักษร ตามด้วย - แล้วตามด้วย <%= หรือ #{ ทันที" — คือรูปแบบ text-<%= … %> และ "bg-#{…}" (การเสียบค่าใน string ของ Ruby · บท 91) · -E = ให้ | ในวงเล็บแปลว่า "หรือ" · \{ = ปีกกาจริง ๆ · โค้ดที่สะอาดจะไม่พิมพ์อะไรออกมาเลย

bin/dev — เปิดร้านพร้อมฝ่ายจัดซื้อประจำกะ

ทุกครั้งที่เราเพิ่มคลาสใหม่ ไฟล์ CSS ต้องถูกสร้างใหม่ · ถ้าต้องสั่ง tailwindcss:build เองทุกครั้งคงเหนื่อย · bin/rails tailwindcss:watch คือตัวที่เฝ้าไฟล์ แก้เมื่อไหร่ build ให้เองทันที · และ bin/dev คือคำสั่งที่เปิด server กับตัวเฝ้าไฟล์พร้อมกันในคำสั่งเดียว ตามรายการในไฟล์ Procfile.dev:

# Procfile.dev
web: bin/rails server
css: bin/rails tailwindcss:watch

หนึ่งบรรทัด = หนึ่งโปรแกรม · ชื่อหน้า : (web · css) เป็นป้ายที่จะโผล่หน้าทุกบรรทัดของ output · รันแล้วได้ (ตัดท้ายมา):

$ bin/dev
10:57:32 web.1  | started with pid 25776
10:57:32 css.1  | started with pid 25777
10:57:32 web.1  | => Booting Puma
…
10:57:33 web.1  | * Listening on http://127.0.0.1:3000
10:57:33 web.1  | * Listening on http://[::1]:3000
10:57:33 web.1  | Use Ctrl-C to stop
10:57:33 css.1  | ≈ tailwindcss v4.3.3
10:57:33 css.1  |
10:57:33 css.1  | /*! 🌼 daisyUI 5.7.50 */
10:57:33 css.1  | Done in 193ms

web.1 = server ของ Rails (ข้อความชุดเดียวกับ bin/rails server) · css.1 = ตัวเฝ้าไฟล์ของ Tailwind ที่ build รอบแรกให้ทันที · แก้ view ทีหลังจะเห็นบรรทัด css.1 | Done in … โผล่เพิ่ม · กด Ctrl-C ทีเดียวปิดทั้งคู่ · pid = เลขประจำโปรแกรมที่ระบบแจกให้ · เวลาและเลข pid ของคุณจะต่าง
(bin/dev ใช้โปรแกรมชื่อ foreman จัดการหลายโปรแกรมพร้อมกัน · ครั้งแรกถ้าเครื่องไม่มี มันจะขึ้น Installing foreman... แล้วลงให้เอง)

ทีนี้ลองแบบลืม · ปิด bin/dev แล้วเปิดแค่ bin/rails server · เพิ่มคลาส text-orange-600 ให้หัวข้อหน้า /posts:

$ curl -s localhost:3000/posts | grep -o '<h1[^>]*>'
<h1 class="font-bold text-3xl sm:text-4xl text-orange-600">
$ grep -c text-orange-600 app/assets/builds/tailwind.css
0

curl -s localhost:3000/posts = ขอหน้า /posts แบบที่เบราว์เซอร์ได้รับ · | = ส่งผลต่อให้คำสั่งถัดไป · grep -o '<h1[^>]*>' = ดึงเฉพาะแท็กเปิด <h1 …> · HTML มีคลาสใหม่แล้ว (Rails อ่าน view ใหม่ทุกครั้งตอน development) · แต่ไฟล์ CSS ยังเป็นฉบับเก่า ไม่มีใครสร้างให้ · หน้าจอจึงไม่ส้ม · ปิด server แล้วเปิด bin/dev แทน:

$ grep -c text-orange-600 app/assets/builds/tailwind.css
1

สไลด์หน้า 32 อ้างว่า "เพิ่มคลาสแล้วไม่เห็นผล 90% คือลืมรัน bin/dev" (ตัวเลขนี้ไม่ได้วัด) · แต่อาการตรงกับที่เราเห็นทุกอย่าง · เช็คข้อนี้เป็นอย่างแรกทุกครั้ง

กับดักซ้อน — ตัวเฝ้าไฟล์จำคลาสเก่า: บนเครื่องเห็นสี แต่เครื่องจริงไม่เห็น

production = เครื่อง server จริงที่ผู้ใช้เข้า · ตอนเอาแอปขึ้นไป (deploy) ไฟล์ CSS จะถูกสร้างใหม่ตั้งแต่ศูนย์ด้วย assets:precompile (บท 127) · กับดักต่อ string ข้างบนสีหายตั้งแต่บนเครื่องเรา (ทดลองผ่าน bin/dev) — แต่มีอยู่ทางหนึ่งที่บนเครื่องยังเห็นสี · ผมลองลำดับนี้โดยเปิด bin/dev ค้างไว้ตลอด:

ขั้น 3 คือตัวการ: ตัว watch ที่เปิดค้างอยู่เพิ่มคลาสใหม่ที่เพิ่งเห็น แต่ไม่ลบคลาสเก่าที่เคยเห็น จนกว่าจะปิดแล้วเปิดใหม่ · บนเครื่องเราจึงยังเห็นสีจากของที่ "จำไว้" · พอสร้างใหม่ตั้งแต่ศูนย์ (ปิดเปิด bin/dev · tailwindcss:build · precompile ตอน deploy) ของที่จำไว้หายหมด
บทเรียน: อย่าเชื่อสายตาบนเครื่องตัวเอง · ใช้ grep หลัง build ใหม่ทุกครั้งเป็นตัวตัดสิน

สรุปคำสั่งที่ใช้บ่อยของเรื่อง CSS (รายการเต็มของ gem ดูได้ด้วย bin/rails -T tailwindcss):

และใครทำอะไรในบล็อก B (สไลด์หน้า 33 ข้อ 2 · จับคู่ให้แล้ว):

เอาไปใช้กับ AI — ประโยคใน prompt และ checklist ตรวจงาน

ตอนนี้คุณทำเองเป็นแล้ว · เวลาสั่ง AI ทำงานหน้าตา (Lab บท 129 จะทำจริง) ให้แนบ @prompts/00-context.md เสมอ (มีบรรทัด "ห้ามสร้าง tailwind.config.js" อยู่แล้ว) · และใส่ข้อห้ามนี้ในส่วน "ห้าม" ของ prompt (โครง 4 ส่วนจากบท 89):

ห้าม:
- สร้าง tailwind.config.js หรือ package.json / npm install
- เปลี่ยน @plugin "./daisyui.mjs" เป็น @plugin "daisyui"
- ต่อชื่อคลาสจากตัวแปร (เช่น text-<%= color %>-500 หรือ "bg-#{x}-100")
  ให้เขียนชื่อคลาสเต็มทุกตัว แล้วเลือกด้วยเงื่อนไข

AI ส่งงานมาแล้ว ตรวจรับด้วย 4 ข้อนี้ (ทุกข้อเป็นคำสั่งที่คุณรันเป็นแล้วในบทนี้):

1. ls tailwind.config.js package.json → ต้องขึ้น No such file or directory ทั้งคู่
2. git grep -n -E '[a-z]-(<%=|#\{)' app/views → ต้องไม่มีผลลัพธ์
3. bin/rails tailwindcss:build แล้ว grep -c คลาสใหม่ที่ AI ใส่มาสัก 2–3 ตัว → ต้องได้ 1 ขึ้นไป
4. เปลี่ยน data-theme เป็น dark ใน Console → ตัวหนังสือยังอ่านออกทุกจุด (ถ้าจม = AI ใช้สีตายตัวแทนสีตามหน้าที่)

<% tone = post.created_at > 7.days.ago ? "amber" : "slate" %>
<span class="<%= "mt-2 inline-block rounded px-2 text-xs bg-#{tone}-100" %>">
  <%= post.created_at > 7.days.ago ? "ใหม่" : "เก่า" %>
</span>

$ bin/rails tailwindcss:build
$ grep -c 'bg-amber-100' app/assets/builds/tailwind.css
0
$ grep -c 'bg-slate-100' app/assets/builds/tailwind.css
0

<% tone_class = post.created_at > 7.days.ago ? "bg-amber-100" : "bg-slate-100" %>
<span class="mt-2 inline-block rounded px-2 text-xs <%= tone_class %>">
  <%= post.created_at > 7.days.ago ? "ใหม่" : "เก่า" %>
</span>

$ bin/rails tailwindcss:build
$ grep -c 'bg-amber-100' app/assets/builds/tailwind.css
1
$ grep -c 'bg-slate-100' app/assets/builds/tailwind.css
1

git restore .
rm -f tailwind.config.js
bin/rails assets:clobber
bin/rails tailwindcss:build
git status

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Tailwind CSS — Detecting classes in source files — อ่าน Dynamic class names (กับดักต่อ string ตัวอย่างเดียวกับบทนี้) · Which files are scanned (ทำไมไฟล์ใน .gitignore ไม่ถูกอ่าน) · Ignoring specific paths (@source not)
• Tailwind CSS — Theme variables — ตาราง Theme variable namespaces (--color-* → คลาสอะไรบ้าง) และหัวข้อ Referencing in JavaScript ถ้าอยากอ่านค่าสีจาก JS
• Tailwind CSS — Upgrade guide — ตาราง Renamed utilities (shadow-sm → shadow-xs ฯลฯ) และ Using a JavaScript config file (ยืนยันว่า v4 ไม่หา tailwind.config.js เอง)
• daisyUI — Themes — ไวยากรณ์ themes: · --default · --prefersdark และ List of themes (35 ธีม)
• daisyUI — Colors — รายชื่อสีตามหน้าที่ (primary · base-100 · base-content …) และเหตุผลที่ควรใช้แทนสีตายตัว
• rails/tailwindcss-rails (README) — หัวข้อ Building for production และส่วนที่อธิบาย tailwindcss:watch · bin/dev