Tailwind CSS v3.3 ออกแล้วมีอะไรน่าสนใจบ้าง

Tailwind CSS เวอร์ชั่น v3.3 ก็ได้ปล่อยออกมาแล้ว มาดูกันดีกว่าว่ามีอะไรเพิ่มเข้ามาบ้าง

สีดำที่ดำกว่าเดิม

ได้มีเพิ่ม shade สีใหม่เข้ามาคือ 950 ซึ่งจะเป็น share สีที่ดำขึ้นมา

https://tailwindcss.com/docs/customizing-colors

Gradient ที่จัดการได้มากขึ้น

ได้มีการเพิ่ม class ใหม่สำหรับการจัดการการไล่สี เช่น from-5%, via-35%, to-85%

https://tailwindcss.com/docs/gradient-color-stops#specifying-stop-positions

Line-clamp ที่มีพร้อมใช้งาน

Line-clamp คือการตัดคำตามจำนวนบรรทัดที่ต้องการ ซึ่งก่อนหน้านี้ถ้าจะใช้งานจะต้องลง plug-ing เพิ่มเอาเอง แต่ Tailwind CSS 3.3 จะมาพร้อมให้ใช้งานเลยครับ

https://tailwindcss.com/docs/line-clamp

การจัดการ Line-height พร้อม Font-size

การระบุ font-size พร้อมกับ line-height ได้ทันที่ เช่น text-xl/8 set ขนาด fotn-szie: 1.25rem และ line-height: 2rem

https://tailwindcss.com/docs/font-size#setting-the-line-height

ใช้ CSS variables แบบไม่ต้องมี var()

ก่อนหน้านี้ถ้าจะใช้ variable จะต้องมีการระบุ var() เพื่อจะใช้งาน แต่ตอนนี้ก็ไม่จำเป็นต้องใช้แล้ว

Utility ใหม่: list-style-image

คือการระบุว่าจะใช้รูปอะไรแสดงในแต่ละรายการ

https://tailwindcss.com/docs/list-style-image

จะมีเรื่องอื่นๆ ที่มีการปรับเปลี่ยนใน Tailwind CSS 3.3 อีกแต่ผมอาจจะไม่ได้พูดถึง ถ้าสนใจอ่านเพิ่มเติมสามารถไปดูได้ที่ลิงค์นี้เลยครับ https://tailwindcss.com/blog/tailwindcss-v3-3