tailwind CSS v4.0: ตัวเปลี่ยนเกมอย่างแท้จริงของการพัฒนาเว็บสมัยใหม่ [บทความแปล]

• ไฮไลต์สำคัญที่สุดของ v4.0 คือ การปรับปรุงประสิทธิภาพ: การบิลด์ทั้งหมดเร็วขึ้นได้สูงสุด 5 เท่า และการบิลด์แบบ incremental เร็วขึ้น มากกว่า 100 เท่า
• การเปลี่ยนพาราไดม์สู่ การตั้งค่าแบบยึด CSS เป็นหลัก: ตั้งค่าได้ โดยตรงใน CSS แทน tailwind.config.js
• ควบคุมลำดับความสำคัญของสไตล์ด้วย @layer
• สามารถกำหนด custom properties ได้ด้วยกฎ @property
• ใช้ฟังก์ชัน Color-Mix() เพื่อปรับความโปร่งใสของค่าสีทุกชนิด รวมถึงตัวแปร CSS และ currentColor
• รองรับการใช้งาน logical properties อย่าง margin-inline แทน margin-left และ margin-right ทำให้รองรับ RTL ได้ง่ายขึ้นมาก
• ขั้นตอนติดตั้งเรียบง่ายขึ้น: แค่ npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; ก็จบ
• ตรวจจับคอนเทนต์อัตโนมัติ: ตอนนี้จะมองข้าม .gitignore และไฟล์ไบนารีอย่างรูปภาพ/วิดีโอโดยอัตโนมัติ พร้อมสแกนไฟล์ที่เกี่ยวข้องให้เอง และรองรับ @source สำหรับข้อยกเว้น
• รองรับ Vite Plugin ก่อนเป็นลำดับแรก
• สร้าง utility แบบไดนามิกได้ ทำให้ใช้ค่าที่ไม่มีอยู่ในคอนฟิกเดิมได้ทันที
• ระบบสีที่พัฒนาไปอีกขั้น: ชุดสีพื้นฐานทั้งหมดอัปเกรดจาก RGB เป็น OKLCH
• มี Container Queries มาในเฟรมเวิร์กโดยตรง
• รองรับ 3D Transforms และเพิ่มกราเดียนต์ที่ดีขึ้น
• เพิ่ม Variants และ Utilities ใหม่: not-*, starting, inert, nth-*, descendant Variant และ field-sizing, color-scheme, inset-shadow-* Utilities
• ย้ายเวอร์ชันง่ายกว่าที่คิด: การเปลี่ยนแปลงส่วนใหญ่ อัปเกรดอัตโนมัติ ได้
• ภาพใหญ่ที่ tailwind กำลังมุ่งไป: ไม่ใช่แค่อัปเดตเฟรมเวิร์ก แต่คือความท้าทายอย่างกล้าหาญต่ออนาคตของ CSS
• จำเป็นต้องอัปเกรดไหม?: ถ้าเป็นโปรเจกต์ใหม่ให้เลือก v4.0 ส่วนโปรเจกต์เดิมก็อัปเกรดได้ไม่ยากหากให้บริการบนเบราว์เซอร์รุ่นใหม่
• บทสรุป: tailwind CSS v4.0 ไม่ใช่แค่วิวัฒนาการ แต่คือการปฏิวัติ

[labeldock]

หลังจากนำ Tailwind มาใช้และลองใช้อยู่ 1 ปี
จะใช้กับโปรเจกต์ถัดไปไหม? YES
เป็น game changer ของการพัฒนาเว็บไหม? NO

คำว่า game changer ดูจะพูดเกินไปหน่อย เลยอยากคอมเมนต์ไว้ครับ
ผมว่ามันยังยากที่จะฟันธงว่าเป็นแนวทางด้านสไตล์แบบก้าวหน้าที่เราควรมุ่งไปในอนาคต

Tailwind มีข้อดีในเรื่องการคัดลอกเทมเพลต การสร้างแบบง่าย ๆ ผ่าน AI และการปรับสไตล์เล็กน้อย

แต่แท็กที่เดิมทีอ่านง่ายก็อาจรกจนอ่านยากขึ้น และก็ทำตามดีไซน์ที่ดีไซเนอร์ออกแบบไว้ได้อย่างประณีตค่อนข้างยากด้วย
ผมยังคิดด้วยว่าถ้ากำหนดตัวแปร CSS ให้ดี ๆ ความยากก็แทบไม่ต่างจาก inline style มากนัก

[bluekai17]

ช่วยซัพพอร์ต rn หน่อย..

[iolothebard]

อย่าไปไกลนัก... มันอาจกลืนกินทุกสิ่ง...

[ng0301]

ตอนนี้คงใช้ 3.x ไปก่อน แล้วถ้ากลายเป็นกระแสหลักจริง ๆ ค่อยย้ายมั้ง

[savvykang]

https://tailwindcss.com/docs/upgrade-guide

• shadow-sm -> shadow-xs
• shadow -> shadow-sm

คาดเดาไม่ได้เลยว่าในเวอร์ชันถัดไปจะทำลายความเข้ากันได้อะไรอีกบ้าง

[cocofather]

ยังคงมีเทคโนโลยีเว็บใหม่ ๆ ทะลักออกมาไม่หยุด
แค่เทคโนโลยีที่มีอยู่แล้วก็เพียงพอแล้ว
แค่มี C, Assembly, HTML และ JavaScript ก็ทำได้ทุกอย่าง

[bokjjang]

ยังไม่ใช้ "ฟังก์ชัน" ของ Excel กันอยู่อีกเหรอ?
ใช้เครื่องคิดเลขก็คำนวณได้ทั้งหมดเหมือนกันนี่ครับ

แล้วทำไมถึงใช้จุดแทนการเว้นวรรคกันล่ะครับ?

[mse9000]

เป็นส่วนหนึ่งของสำนวนพิมพ์แบบผู้สูงอายุของมนุษย์
ดูเหมือนจะเป็นการล้อเลียนการที่ผู้สูงอายุมักพิมพ์จุดบ่อย ๆ แทนการเว้นวรรค..

[codemasterkimc]

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

[swooooooo]

5555555555 ตลกมากเลย

[illiil1lii]

โปรเจ็กต์เดิม หากเป็นบริการที่รองรับเบราว์เซอร์รุ่นใหม่ ก็อัปเกรดได้อย่างง่ายดาย

😅

[ahwjdekf]

เขาบอกว่าเป็นการทำให้ง่ายขึ้นและอัปเกรด แต่สุดท้ายก็คือให้ไปเรียนรู้อะไรใหม่อีกอย่างอยู่ดี ก็แค่นั้นแหละ