เปิดซอร์สความคืบหน้าของ Tailwind CSS v4.0

 (tailwindcss.com)
7 คะแนน โดย GN⁺ 2024-03-08 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • กำลังพัฒนา Oxide เอนจินประสิทธิภาพสูงตัวใหม่สำหรับ Tailwind CSS v4.0
  • ออกแบบมาเพื่อทำให้ประสบการณ์นักพัฒนาง่ายขึ้น และใช้ประโยชน์จากวิวัฒนาการล่าสุดของเว็บแพลตฟอร์ม
  • เดิมทีวางแผนจะออกเป็นรุ่น v3.x แต่ตัดสินใจปล่อยเป็น v4.0 ในฐานะเฟรมเวิร์กรุ่นใหม่
  • ยังอยู่ในช่วงเริ่มต้นและยังมีงานอีกมาก แต่ได้แท็กอัลฟาสาธารณะรุ่นแรกไว้เพื่อให้เริ่มทดลองได้

เอนจินใหม่ สร้างมาเพื่อความเร็ว

  • เอนจินใหม่ถูกเขียนขึ้นใหม่ทั้งหมดตั้งแต่ต้น เพื่อให้เร็วขึ้นด้วยโค้ดที่น้อยลง
  • ให้ความเร็วในการบิลด์สูงสุดมากขึ้นถึง 10 เท่า โดยเว็บไซต์ Tailwind CSS บิลด์ได้ใน 105ms และชุด UI Catalyst บิลด์ได้ใน 55ms
  • เอนจินใหม่มีขนาดติดตั้งเล็กลงมากกว่า 35% แม้จะรวมแพ็กเกจเนทีฟขนาดใหญ่อย่าง Rust และ Lightning CSS
  • ใช้ Rust จัดการส่วนที่มีต้นทุนสูงที่สุดของเฟรมเวิร์ก และคงแกนหลักไว้ใน TypeScript เพื่อความสามารถในการขยายต่อ
  • เอนจินใหม่พึ่งพาเพียง Lightning CSS เท่านั้น
  • มีการเขียน CSS parser ขึ้นเอง และออกแบบโครงสร้างข้อมูลที่พาร์สได้เร็วกว่า PostCSS 2 เท่า

ทูลเชนแบบรวมศูนย์

  • Tailwind CSS v4 ไม่ใช่ปลั๊กอินอีกต่อไป แต่เป็นเครื่องมือแบบ all-in-one สำหรับจัดการ CSS
  • มี @import, vendor prefixing และการรองรับ nested syntax ในตัว จึงไม่ต้องตั้งค่าแยก
  • แปลงฟีเจอร์ CSS สมัยใหม่อย่าง oklch() และ media query range ให้เป็น syntax ที่รองรับเบราว์เซอร์ได้ดียิ่งขึ้น
  • ยังคงมี PostCSS plugin ให้ใช้งาน แต่กำลังสำรวจปลั๊กอินสำหรับ bundler และจะมี Vite plugin อย่างเป็นทางการพร้อมอัลฟารุ่นแรก

ออกแบบเพื่อเว็บยุคใหม่

  • Tailwind CSS v4 ต้องการสร้างเฟรมเวิร์กที่ยังคงให้ความรู้สึกล้ำสมัยไปอีกหลายปีข้างหน้า
  • ใช้กฎ @layer จริงเพื่อแก้ปัญหา specificity ที่เคยเป็นปัญหาในอดีต
  • ใช้ @property เพื่อกำหนด custom property ภายในอย่างชัดเจน และเปิดทางให้เอฟเฟ็กต์อย่าง background gradient
  • ใช้ color-mix เพื่อให้แก้ไข opacity ของตัวแปรสี หรือปรับ opacity ของ currentColor ได้ง่ายขึ้น
  • รองรับ container queries โดยตรงในแกนหลัก และรองรับช่วงของ container query ผ่าน variants ใหม่ @min-* และ @max-*

Variants ที่ประกอบร่วมกันได้

  • สถาปัตยกรรมใหม่ทำให้สามารถประกอบ variants ที่ทำงานกับ selector คนละตัวเข้าด้วยกันได้
  • ในเวอร์ชันก่อนหน้า variants อย่าง group-has-* ต้องถูกกำหนดไว้อย่างชัดเจนในเฟรมเวิร์ก แต่ตอนนี้ group-* สามารถนำมาประกอบร่วมกับ variant has-* ที่มีอยู่แล้วได้

การตรวจจับคอนเทนต์แบบไม่ต้องตั้งค่า

  • ในอัลฟารุ่นแรกยังไม่สามารถตั้งค่าเส้นทาง content ได้ และสำหรับโปรเจ็กต์ส่วนใหญ่ก็ไม่น่าจำเป็นต้องกำหนดใหม่อีก
  • หากใช้ PostCSS plugin หรือ CLI, Tailwind จะไล่สำรวจทั้งโปรเจ็กต์เพื่อค้นหาไฟล์เทมเพลต
  • หากใช้ Vite plugin ก็จะอาศัย module graph เพื่อรู้ได้อย่างแม่นยำว่าไฟล์ใดถูกใช้งานจริง

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

  • เป้าหมายสำคัญของ Tailwind CSS v4.0 คือทำให้เฟรมเวิร์กรู้สึกเหมือนเป็น native ของ CSS มากขึ้น และไม่เหมือน JavaScript library
  • หลังติดตั้งแล้ว สามารถเพิ่มเข้าโปรเจ็กต์ได้ด้วยคำสั่ง @import ของ CSS ปกติ
  • แทนที่จะตั้งค่าการปรับแต่งทั้งหมดในไฟล์คอนฟิก JavaScript จะหันมาใช้ CSS variables

สิ่งที่เปลี่ยนไป

  • แม้จะไม่ได้มองข้าม breaking changes แต่ใน v4 มีบางอย่างที่จัดการแตกต่างไป
  • ลบ utility ที่ไม่ได้มีการบันทึกไว้ในเอกสารแล้ว
  • PostCSS plugin และ CLI ถูกแยกออกเป็นแพ็กเกจต่างหาก
  • เอาสีเส้นขอบเริ่มต้นออก
  • โดยค่าเริ่มต้น utility ring จะกลายเป็นวงแหวน 1px ที่ใช้ currentColor

โรดแมปสู่ v4.0

  • เอนจินใหม่ถูกเขียนขึ้นใหม่ทั้งหมดตั้งแต่ต้น และมุ่งเน้นเต็มที่ไปที่ประสบการณ์นักพัฒนาด้วยแนวทางการตั้งค่าแบบใหม่
  • ให้ความสำคัญอย่างมากกับ backward compatibility และนี่คือหนึ่งในงานหลักเพื่อให้ไปถึงรุ่นเสถียร v4.0
  • รวมถึงการรองรับไฟล์คอนฟิก JavaScript, การตั้งค่าเส้นทาง content แบบ explicit, การรองรับ dark mode แบบอื่น, การรองรับปลั๊กอินและ custom utility, การตั้งค่า class prefix, การรองรับ safelists และ blocklists, การรองรับการตั้งค่า important, การรองรับฟังก์ชัน theme(), การรองรับ standalone CLI เป็นต้น

ลองใช้อัลฟาเวอร์ชัน

  • มีการแท็กอัลฟาหลายรุ่นไว้แล้ว และสามารถเริ่มทดลองในโปรเจ็กต์ได้ตั้งแต่วันนี้
  • หากใช้ส่วนขยาย Tailwind CSS IntelliSense จะต้องสลับไปใช้รุ่น pre-release จากหน้า VS Code extension
  • หากพบปัญหา อยากให้แจ้งผ่าน GitHub

การใช้ Vite

  • ติดตั้ง Tailwind CSS v4 alpha และ Vite plugin ตัวใหม่
  • เพิ่มปลั๊กอินลงในไฟล์ vite.config.ts
  • import Tailwind ในไฟล์ CSS หลัก

การใช้ PostCSS

  • ติดตั้ง Tailwind CSS v4 alpha และแพ็กเกจ PostCSS plugin ที่แยกออกมาต่างหาก
  • เพิ่มปลั๊กอินลงในไฟล์ postcss.config.js
  • import Tailwind ในไฟล์ CSS หลัก

การใช้ CLI

  • ติดตั้ง Tailwind CSS v4 alpha และแพ็กเกจ CLI ที่แยกออกมาต่างหาก
  • import Tailwind ในไฟล์ CSS หลัก
  • ใช้เครื่องมือ CLI เพื่อคอมไพล์ CSS

ความเห็นของ GN⁺

  • การเปิดซอร์สของ Tailwind CSS v4.0 เปิดโอกาสให้นักพัฒนาได้ลองใช้ฟีเจอร์และการปรับปรุงใหม่ล่วงหน้า นั่นหมายถึงนักพัฒนาสามารถส่ง feedback ต่อเฟรมเวิร์ก และมีส่วนช่วยให้รุ่นสุดท้ายมีความเสถียรมากขึ้น
  • การเพิ่มประสิทธิภาพของเอนจินใหม่ดูเหมือนจะช่วยลดเวลาบิลด์ได้อย่างมาก ซึ่งน่าจะเป็นประโยชน์โดยเฉพาะกับโปรเจ็กต์ขนาดใหญ่หรือสภาพแวดล้อมที่วงจรการพัฒนารวดเร็วเป็นเรื่องสำคัญ
  • การผสานกันของ Rust และ TypeScript สะท้อนแนวทางสมัยใหม่ที่ต้องการทั้งประสิทธิภาพและความสามารถในการขยายต่อ โดยส่วนที่เขียนด้วย Rust จะช่วยดันประสิทธิภาพให้สูงสุด ขณะที่ TypeScript ทำให้นักพัฒนาขยายและดูแลรักษาได้ง่าย
  • แนวทางการตั้งค่าใหม่ด้วย CSS variables มีความเป็นมิตรกับ CSS มากกว่าการตั้งค่าแบบ JavaScript เดิม และอาจช่วยให้การผสานกับดีไซน์ซิสเต็มทำได้ง่ายขึ้น
  • การเปลี่ยนแปลงเหล่านี้อาจทำให้ผู้ใช้เดิมต้องมีงาน migration อยู่บ้าง แต่ในระยะยาวคาดว่าจะนำไปสู่โค้ดเบสที่กระชับและดูแลรักษาง่ายขึ้น

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
2024-03-09
[ความคิดเห็นนี้ถูกซ่อน]
 
GN⁺ 2024-03-08
ความคิดเห็นบน Hacker News

  • Tailwind CSS เป็นสิ่งที่ดีที่สุดอันดับสองในฝั่งฟรอนต์เอนด์ โดยมีเพียง Vue 3 เท่านั้นที่เหนือกว่า

    • ไม่ต้องเสียแรงตั้งชื่อคลาส CSS และไม่มีปัญหาโค้ด CSS ซ้ำซ้อนหรือคลาสชนกัน
    • โค้ดทั้งหมดอยู่ในไฟล์เดียว จึงสามารถมองเห็นภาพของคอมโพเนนต์ได้จากการดูโค้ดเพียงอย่างเดียว
    • จะไม่กลับไปใช้ SCSS อีก และคิดว่าชุด Vue 3, TailwindCSS, Vite นั้นยอดเยี่ยมที่สุด

  • ในฐานะคนที่วิจารณ์ Tailwind อย่างหนัก การประกาศทั้งหมดภายใต้แนวทางการตั้งค่าแบบ CSS-first นั้นน่ายินดีอย่างมาก

    • สามารถใช้ design tokens, reset และสิ่งอื่น ๆ ของ Tailwind ได้ และปรับแต่งผ่าน CSS จริงได้
    • นำเสนอวิธีใหม่ในการใช้ Tailwind แบบ "เบา ๆ" โดยไม่ทิ้งสถาปัตยกรรมสมัยใหม่ของ CSS, cascade หรือแม้แต่ shadow DOM ของเว็บคอมโพเนนต์

  • CTRL+u แสดงให้เห็นตัวอย่างที่ดีของไวยากรณ์

    • ตัวอย่างเช่น ต้องการโค้ดหนึ่งบรรทัดที่เข้าใจได้ง่ายสำหรับสร้างกล่องมุมมน พร้อมส่วนบนและส่วนล่าง

  • ยังไม่ได้ทำงานกับ standalone CLI แต่จะต้องทำให้เสร็จก่อนออก v4.0 อย่างแน่นอน

    • เมื่อพิจารณาจากส่วนที่เหลือของประกาศเปิดตัว คาดว่าน่าจะสร้างด้วย Rust
    • ชอบแบบที่ไม่ฝัง Node มาด้วย โดยเฉพาะถ้าต้องพึ่งพาเครื่องมือ pkg ของ Vercel ที่ตอนนี้ถูกทิ้งไปแล้ว

  • มีการปรับปรุงที่มีอนาคตไกลหลายอย่าง

    • ตื่นเต้นที่สุดกับความสามารถในการควบคุมธีมผ่าน CSS แทนการขยายผ่าน JS

  • หวังว่า Tailwind จะรองรับ attributify แบบเดียวกับ unocss

    • สำหรับเลย์เอาต์ที่ซับซ้อน มันอ่านง่ายกว่ามาก

  • ไม่ใช่นักพัฒนาฟรอนต์เอนด์ แต่ดูแลเว็บไซต์อยู่หลายแห่งและทั้งหมดใช้ Tailwind

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

  • สงสัยว่ามีบทสอน/คู่มือที่ดีสำหรับ Tailwind หรือไม่

  • สงสัยว่ามีใครใช้ tailwindcss ร่วมกับ htmx หรือแนวทาง hateoas แบบอื่นบ้างไหม

    • แม้ว่า hypertext ไม่ควรเกี่ยวข้องกับการจัดสไตล์ แต่สิ่งอย่าง tailwind อาจขัดกับแนวคิดนี้ได้
    • CSS กับ hateoas เข้ากันได้อย่างสมบูรณ์แบบเพราะแยกมาร์กอัปกับการจัดสไตล์ออกจากกัน แต่ในกรณีของ tailwindcss ก็สงสัยว่าคนทำกันอย่างไร

  • อยากใช้ในโปรเจ็กต์เดโม แต่ import from "node:@tailwindcss/postcss@latest" ทำให้เกิดข้อผิดพลาดเกี่ยวกับฟิลด์ exports ใน package.json

    • ถึงอย่างนั้น ในบล็อกโพสต์ก็ระบุว่าไม่จำเป็นต้องใช้ postcss-import แต่ก็ยังคงใส่มันไว้เป็น dependency