Loading...
Loading...
Loading...
วิธี setup semantic color tokens ใน Tailwind CSS v4 — CSS Variable + @theme inline
3 ขั้นตอน: กำหนด CSS Variable → Register ใน @theme inline → ใช้ใน Component
:root {
--brand-100: oklch(84.678% 0.20046 128.108);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
}
.dark {
--brand-100: oklch(49.171% 0.12749 129.403);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
}@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-brand-100: var(--brand-100);
/* pattern: --color-{name}: var(--{css-var}); */
/* ผลลัพธ์: ใช้ bg-{name}, text-{name}, border-{name} ได้ */
}{/* ✅ ใช้ semantic token */}
<div className="bg-background text-foreground">
<h1 className="text-primary">Hello</h1>
<p className="text-muted-foreground">Subtitle</p>
<button className="bg-brand-100">Custom Brand</button>
</div>
{/* ❌ ห้าม hardcode สี */}
<div className="bg-white text-black">
<div className="bg-[#C40C0C]">
<div style={{ color: '#C40C0C' }}>สร้าง class ใหม่ที่ทำงานเหมือน built-in — ใช้กับ gradient, component base, complex styles
กำหนดใน globals.css:
/* globals.css */
/* Step 1: กำหนด gradient ใน :root / .dark */
:root {
--brandGD-200: linear-gradient(180deg, var(--brand-50, #e8f5e9), var(--brand-100));
}
.dark {
--brandGD-200: linear-gradient(180deg, var(--brand-50, #1a3a1a), var(--brand-100));
}
/* Step 2: สร้าง @utility — ใช้เป็น class ได้เลย */
@utility bg-brandGD-200 {
background: var(--brandGD-200);
}
/* ตัวอย่างอื่น */
@utility text-gradient {
background: linear-gradient(90deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@utility bg-glass {
background: oklch(from var(--background) l c h / 50%);
backdrop-filter: blur(12px);
}ใช้ใน Component:
{/* ใช้ใน JSX เหมือน class ปกติ */}
<div className="bg-brandGD-200">Gradient Card</div>
<h1 className="text-gradient">Gradient Text</h1>
<nav className="bg-glass">Glass Navbar</nav>1. กำหนด CSS Variable:
--brandGD-100: linear-gradient(180deg, var(--brand-50, #e8f5e9), var(--brand-100));2. สร้าง @utility:
@utility bg-brandGD-100 {
background: var(--brandGD-100);
}1. กำหนด CSS Variable:
--brandGD-200: linear-gradient(90deg, var(--primary), var(--accent));2. สร้าง @utility:
@utility bg-brandGD-200 {
background: var(--brandGD-200);
}1. กำหนด CSS Variable:
--brandGD-300: linear-gradient(135deg, var(--primary), var(--secondary));2. สร้าง @utility:
@utility bg-brandGD-300 {
background: var(--brandGD-300);
}1. กำหนด CSS Variable:
--brandGD-400: linear-gradient(90deg, var(--chart-1), var(--chart-3), var(--chart-5));2. สร้าง @utility:
@utility bg-brandGD-400 {
background: var(--brandGD-400);
}1. กำหนด CSS Variable:
--brandGD-500: radial-gradient(circle, var(--primary), transparent 70%);2. สร้าง @utility:
@utility bg-brandGD-500 {
background: var(--brandGD-500);
}1. กำหนด CSS Variable:
/* ไม่ต้องใช้ CSS variable */2. สร้าง @utility:
@utility bg-glass {
background: oklch(from var(--background) l c h / 50%);
backdrop-filter: blur(12px);
border: 1px solid oklch(from var(--border) l c h / 50%);
}เลือก format ที่เหมาะกับ project — shadcn/ui default ใช้ oklch
oklch(0.87 0.15 150)+ Perceptually uniform, ปรับ lightness ได้สม่ำเสมอ, รองรับ wide gamut
- ยังใหม่, อ่านค่าสียาก
hsl(150, 60%, 50%)+ อ่านง่าย, ปรับ hue/saturation/lightness สะดวก
- ไม่ perceptually uniform, gamut แคบกว่า oklch
#4ade80+ สั้น, ใช้กันแพร่หลาย, copy จาก Figma ได้เลย
- อ่านค่าสียาก, ไม่รองรับ opacity syntax, gamut แคบ
rgb(74, 222, 128)+ รองรับทุก browser, ค่าตรงกับ design tool
- อ่านยาก, ไม่ intuitive ในการปรับสี