Tailwind CSS v3.3 มีอะไรใหม่บ้าง?

วันนี้ทีมงาน Tailwind เพิ่งเขียนบล็อกใหม่ เกี่ยวกับ Tailwind 3.3 มี feature ที่น่าสนใจเพียบเลย สำหรับโพสนี้ ผมขอสรุปสั้นๆ ละกันนะครับ ใครอยากอ่านฉบับเต็มๆ แนะนำตามไปอ่านที่บล็อก Tailwind ได้เลยครับ

Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more - Tailwind CSS

Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted.

Tailwind CSS

มี Features อะไรใหม่บ้าง?

• New Color Palette - ก็คือมีสีใหม่ เพิ่มขึ้นมาจาก ปกติ ที่มี color-50 ถึง color-900 ก็มี 950 เพิ่มขึ้นมาอีก เป็น color-950

• ESM และ TypeScript - Tailwind Config รองรับ ESM และก็ TypeScript แล้ว

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

• สามารถ init ได้ แบบ --esm และก็ --ts

npx tailwindcss init --esm

npx tailwindcss init --ts

• ทำให้ RTL ง่ายขึ้น - พวกรองรับการอ่านจากซ้ายไปขวา ขวาไปซ้าย อะไรพวกนี้ ส่วนตัวผมยังไม่เคยทำงานรองรับพวกภาษา ที่ต้องอ่านแบบนี้ ก็เลยยังไม่ค่อยเข้าใจเท่าไหร่ครับ
• เพิ่ม from-5%, via-35%, and to-85% สำหรับ Gradient Color อ่านต่อ Gradient Color Stops - Tailwind CSS

• line-clamp ไม่ต้องใช้ plugin แล้ว มีอยู่ใน Tailwind 3.3 เลย
• line height ใหม่ แบบสั้นๆ จาก text-lg leading-7 เป็น text-lg/7
• CSS Variables ไม่ต้องใช้ var() แล้ว สั้นลงไปอีก
• list style image เท่ๆ list-image-[url(carrot.png)]

• ตัดคำที่มันยาวๆ ได้ - ดูเรื่อง Hyphens

สุดท้าย ลองไปอ่านเต็มๆ ที่บล็อกนะครับ จะได้เห็นภาพ ตัวอย่างชัดเจน และก็ดู Docs จะมีเนื้อหาของเวอร์ชั่น 3.3 แล้ว

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

Tailwind CSS