Styling Track
CSS
Tailwind Essentials
Tailwind v4 theme tokens
เรียนรู้การเพิ่ม design tokens ด้วย @theme ใน Tailwind v4 ผ่าน <style type="text/tailwindcss"> สำหรับสี ฟอนต์ spacing และ breakpoint แบบ CDN-first
@theme คือที่กำหนด design tokens
Tailwind v4 ใช้แนวคิด CSS-first configuration มากขึ้น ถ้าต้องเพิ่ม token เช่นสีแบรนด์หรือฟอนต์เฉพาะ ให้เขียนใน @theme เมื่อใช้ browser CDN ต้องใส่ custom Tailwind CSS ใน <style type="text/tailwindcss"> แล้วประกาศ token เช่น --color-brand-500 จากนั้นใช้ class อย่าง bg-brand-500 หรือ text-brand-500 ได้
HTML
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-brand-500: #2563eb;
}
</style>
<button class="bg-brand-500 text-white">ใช้ token ใหม่</button>