เปิดตัว Tailwind CSS v4.0

• เปิดตัว Tailwind CSS v4.0

  • เวอร์ชันใหม่ที่ปรับแต่งทั้งประสิทธิภาพและความยืดหยุ่นให้เหมาะสมที่สุด โดยใช้ประโยชน์จากพัฒนาการล่าสุดของเว็บแพลตฟอร์มได้อย่างเต็มที่
  • เอนจินประสิทธิภาพสูงตัวใหม่ทำให้ความเร็วในการบิลด์ทั้งหมดเร็วขึ้นสูงสุด 5 เท่า และความเร็วในการบิลด์แบบ incremental เร็วขึ้นมากกว่า 100 เท่า
  • ออกแบบมาให้เหมาะกับเว็บสมัยใหม่โดยอาศัยความสามารถ CSS รุ่นล่าสุด

• เอนจินประสิทธิภาพสูงตัวใหม่

  • Tailwind CSS v4.0 เป็นการเขียนเฟรมเวิร์กใหม่ทั้งหมด โดยปรับสถาปัตยกรรมให้เหมาะสมเพื่อรีดความเร็วสูงสุด
  • การบิลด์แบบ incremental เร็วขึ้นมากกว่า 100 เท่า จนเสร็จสิ้นได้ในระดับไมโครวินาที

• ออกแบบสำหรับเว็บสมัยใหม่

  • ใช้ความสามารถ CSS สมัยใหม่ เช่น native cascade layers, registered custom properties และ color-mix()
  • ใช้ logical properties เพื่อลดความซับซ้อนของการรองรับ RTL และลดขนาด CSS ที่สร้างขึ้น

• การติดตั้งที่เรียบง่ายขึ้น

  • กระบวนการติดตั้งถูกทำให้ง่ายขึ้น ลด dependency และเพียงเพิ่มโค้ดหนึ่งบรรทัดในไฟล์ CSS ก็ใช้งานได้
  • รองรับกฎ @import ในตัวโดยไม่ต้องใช้ปลั๊กอินภายนอก

• ปลั๊กอินสำหรับ Vite

  • ผู้ใช้ Vite สามารถผสาน Tailwind ได้ด้วย @tailwindcss/vite
  • การใช้ปลั๊กอิน Vite ช่วยเพิ่มประสิทธิภาพได้มากขึ้นอีก

• การตรวจจับคอนเทนต์อัตโนมัติ

  • ตรวจจับไฟล์เทมเพลตโดยอัตโนมัติ ไม่ต้องตั้งค่าเอง
  • มองข้ามรายการในไฟล์ .gitignore โดยอัตโนมัติเพื่อป้องกันการสแกนที่ไม่จำเป็น

• รองรับ import ในตัว

  • ใช้ @import เพื่อนำเข้าไฟล์ CSS อื่นแบบ inline ได้
  • ระบบ import ที่ปรับให้เหมาะกับ Tailwind CSS ช่วยเพิ่มประสิทธิภาพยิ่งขึ้น

• การตั้งค่าแบบ CSS-first

  • สามารถตั้งค่าโปรเจ็กต์ใน CSS แทน JavaScript ได้
  • ปรับแต่งได้โดยตรงในไฟล์ CSS โดยไม่ต้องมีไฟล์ tailwind.config.js

• ตัวแปรธีม CSS

  • ให้ design tokens ในรูปแบบตัวแปร CSS เพื่อให้อ้างอิงได้ง่ายขณะรันไทม์

• ค่าของยูทิลิตีและ variant แบบไดนามิก

  • ทำให้ยูทิลิตีและ variant ต่างๆ รองรับค่าตามต้องการได้ง่ายขึ้น
  • ตั้งค่าขนาดกริดหรือ custom data attributes ได้สะดวก

• พาเลตสี P3 ที่ทันสมัยขึ้น

  • อัปเกรดพาเลตสีเริ่มต้นจาก rgb เป็น oklch เพื่อให้ได้สีที่สดยิ่งขึ้น

• Container queries

  • มี API ในตัวสำหรับกำหนดสไตล์องค์ประกอบตามขนาดคอนเทนเนอร์

• ยูทิลิตีแปลงแบบ 3D ใหม่

  • เพิ่ม API สำหรับแปลงองค์ประกอบในพื้นที่ 3D

• Gradient API ที่ขยายเพิ่ม

  • เพิ่มยูทิลิตีสำหรับสร้าง linear, conic และ radial gradients

• รองรับ @starting-style

  • เพิ่มความสามารถในการเปลี่ยนคุณสมบัติเมื่อองค์ประกอบแสดงผลครั้งแรกได้โดยไม่ต้องใช้ JavaScript

• variant not-*

  • เพิ่มการรองรับ CSS pseudo-class :not()

• เพิ่มยูทิลิตีและ variant ใหม่

  • เพิ่มยูทิลิตีและ variant ใหม่หลากหลาย เช่น inset-shadow-*, field-sizing, color-scheme เป็นต้น

Tailwind CSS v4.0 เป็นเวอร์ชันล่าสุดที่ยกระดับทั้งประสิทธิภาพและความยืดหยุ่นสูงสุด พร้อมฟีเจอร์ใหม่และการปรับปรุงหลากหลายรายการ

[GN⁺]

ความคิดเห็นจาก Hacker News

• ประเมินพัฒนาการของ Tailwind v4 ในทางบวก โดยมองว่าการรองรับ CSS variables และการตั้งค่าแบบ CSS-only เป็นข้อดีอย่างมาก และเห็นว่า Tailwind ตอนนี้ทำหน้าที่ในฐานะยูทิลิตีได้ดีแล้ว

• CSS กลายเป็นมิตรกับผู้ใช้มากขึ้นกว่าในอดีต และการใช้ style properties โดยตรงใน HTML อาจเรียบง่ายกว่า แต่บางคนก็ยังต้องการหลีกเลี่ยงการใช้ style attributes อยู่ดี

• ข้อดีของการใช้ Tailwind คือสามารถอ่านสไตล์ได้จากที่เดียว แม้ชื่อคลาสจะยาว แต่ก็มีประโยชน์เพราะแก้ไขสไตล์ได้ง่าย

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

• ในโปรเจ็กต์ที่ใช้ Tailwind รู้สึกว่ามันใช้งานได้ตรงไปตรงมาและมีเอกสารประกอบที่ดี ไม่ต้องเสียเวลาคิดชื่อสไตล์ ช่วยประหยัดเวลาได้

• อัปเดตล่าสุดของ Tailwind ช่วยลดเวลา build และไม่จำเป็นต้องมีการตั้งค่า JS อีกต่อไป ตอนนี้ CSS สามารถจัดการงานส่วนใหญ่ได้แล้ว

• เคยพยายามใช้ Tailwind แต่ผลลัพธ์ออกมาไม่ดีเท่า Bootstrap และกำลังคิดหาวิธีให้ได้ผลลัพธ์ที่ดูดีพอสมควรโดยไม่ต้องเป็นดีไซเนอร์

• ดีไซน์ที่ดูสะอาดตาแต่ค่อนข้างทั่วไปของ Tailwind แพร่หลายอย่างมาก ซึ่งสะท้อนทั้งข้อดีและข้อจำกัดของการทำสไตล์แบบ inline ของ Tailwind

• การอัปเดตไปใช้ Tailwind v4 ส่งผลกระทบต่อแอปเดิม ทำให้ต้องใช้ v3 ต่อไปหรือไม่ก็ต้องแก้ไข build scripts เพราะปัญหาด้านความเข้ากันได้