Sử dụng các lớp tiện ích như một API cho các design token của bạn.
Tailwind là một framework để xây dựng các thiết kế tùy chỉnh, và các thiết kế khác nhau cần kiểu chữ, màu sắc, bóng, điểm ngắt (breakpoints) và nhiều thứ khác nhau.
Những quyết định thiết kế cấp thấp này thường được gọi là design tokens, và trong các dự án Tailwind, bạn lưu trữ các giá trị đó trong biến theme.
Biến theme là các biến CSS đặc biệt được xác định bằng cách sử dụng chỉ thị @theme ảnh hưởng đến các lớp tiện ích nào tồn tại trong dự án của bạn.
Ví dụ, bạn có thể thêm một màu mới vào dự án của mình bằng cách xác định một biến theme như --color-mint-500:
@import "tailwindcss";@theme { --color-mint-500: oklch(0.72 0.11 178);}Bây giờ bạn có thể sử dụng các lớp tiện ích như bg-mint-500, text-mint-500, hoặc fill-mint-500 trong HTML của bạn:
<div class="bg-mint-500"> <!-- ... --></div>Tailwind cũng tạo ra các biến CSS thông thường cho các biến theme của bạn để bạn có thể tham chiếu các design token của mình trong các giá trị tùy ý hoặc các kiểu nội dòng (inline styles):
<div style="background-color: var(--color-mint-500)"> <!-- ... --></div>Tìm hiểu thêm về cách các biến theme ánh xạ tới các lớp tiện ích khác nhau trong tài liệu không gian tên biến theme.
@theme thay vì :root?Biến theme không chỉ là các biến CSS — chúng cũng hướng dẫn Tailwind tạo ra các lớp tiện ích mới mà bạn có thể sử dụng trong HTML của mình.
Vì chúng làm nhiều việc hơn các biến CSS thông thường, Tailwind sử dụng cú pháp đặc biệt để việc xác định các biến theme luôn rõ ràng. Các biến theme cũng được yêu cầu phải được xác định ở cấp cao nhất và không được lồng dưới các selector hoặc media queries khác, và việc sử dụng một cú pháp đặc biệt giúp có thể thực thi điều đó.
Việc xác định các biến CSS thông thường với :root vẫn có thể hữu ích trong các dự án Tailwind khi bạn muốn xác định một biến không có ý định kết nối với một lớp tiện ích. Sử dụng @theme khi bạn muốn một design token ánh xạ trực tiếp tới một lớp tiện ích, và sử dụng :root để xác định các biến CSS thông thường không nên có các lớp tiện ích tương ứng.
Một số lớp tiện ích trong Tailwind như flex và object-cover là tĩnh, và luôn giống nhau từ dự án này sang dự án khác. Nhưng nhiều lớp khác được điều khiển bởi các biến theme, và chỉ tồn tại vì các biến theme bạn đã xác định.
Ví dụ, các biến theme được xác định trong không gian tên --font-* xác định tất cả các tiện ích font-family tồn tại trong một dự án:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ... */}Các tiện ích font-sans, font-serif, và font-mono chỉ tồn tại theo mặc định vì theme mặc định của Tailwind xác định các biến theme --font-sans, --font-serif, và --font-mono.
Nếu một biến theme khác như --font-poppins được xác định, một lớp tiện ích font-poppins sẽ trở nên có sẵn để đi cùng với nó:
@import "tailwindcss";@theme { --font-poppins: Poppins, sans-serif;}<h1 class="font-poppins">This headline will use Poppins.</h1>Bạn có thể đặt tên cho các biến theme của mình bất cứ điều gì bạn muốn trong các không gian tên này, và một tiện ích tương ứng với cùng tên sẽ trở nên có sẵn để sử dụng trong HTML của bạn.
Một số biến theme được sử dụng để xác định các biến thể thay vì các tiện ích. Ví dụ, các biến theme trong không gian tên --breakpoint-* xác định các biến thể điểm ngắt phản hồi nào tồn tại trong dự án của bạn:
@import "tailwindcss";@theme { --breakpoint-3xl: 120rem;}Bây giờ bạn có thể sử dụng biến thể 3xl:* để chỉ kích hoạt một tiện ích khi viewport rộng 120rem hoặc hơn:
<div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4"> <!-- ... --></div>Tìm hiểu thêm về cách các biến theme ánh xạ tới các lớp tiện ích và biến thể khác nhau trong tài liệu không gian tên biến theme.
Các biến theme được xác định trong không gian tên và mỗi không gian tên tương ứng với một hoặc nhiều API lớp tiện ích hoặc biến thể.
Việc xác định các biến theme mới trong các không gian tên này sẽ làm cho các tiện ích và biến thể tương ứng mới có sẵn trong dự án của bạn:
| Không gian tên | Lớp tiện ích |
|---|---|
--color-* | Các tiện ích màu sắc như bg-red-500, text-sky-300, và nhiều hơn nữa |
--font-* | Các tiện ích font family như font-sans |
--text-* | Các tiện ích kích thước font chữ như text-xl |
--font-weight-* | Các tiện ích độ đậm font chữ như font-bold |
--tracking-* | Các tiện ích khoảng cách chữ cái như tracking-wide |
--leading-* | Các tiện ích chiều cao dòng như leading-tight |
--breakpoint-* | Các biến thể điểm ngắt phản hồi như sm:* |
--container-* | Các biến thể truy vấn container như @sm:* và các tiện ích kích thước như max-w-md |
--spacing-* | Các tiện ích khoảng cách và kích thước như px-4, max-h-16, và nhiều hơn nữa |
--radius-* | Các tiện ích bán kính viền như rounded-sm |
--shadow-* | Các tiện ích box shadow như shadow-md |
--inset-shadow-* | Các tiện ích inset box shadow như inset-shadow-xs |
--drop-shadow-* | Các tiện ích bộ lọc drop shadow như drop-shadow-md |
--blur-* | Các tiện ích bộ lọc mờ như blur-md |
--perspective-* | Các tiện ích phối cảnh như perspective-near |
--aspect-* | Các tiện ích tỷ lệ khung hình như aspect-video |
--ease-* | Các tiện ích hàm thời gian chuyển tiếp như ease-out |
--animate-* | Các tiện ích hoạt ảnh như animate-spin |
Để có danh sách tất cả các biến theme mặc định, xem tham chiếu biến theme mặc định.
Khi bạn import tailwindcss ở đầu tệp CSS của mình, nó bao gồm một tập hợp các biến theme mặc định để bạn bắt đầu.
Đây là những gì bạn thực sự đang import khi bạn import tailwindcss:
@layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);Tệp theme.css đó bao gồm bảng màu mặc định, thang đo kiểu chữ, bóng, font chữ, và nhiều hơn nữa:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}Đây là lý do tại sao các tiện ích như bg-red-200, font-serif, và shadow-sm tồn tại ngay lập tức — chúng được điều khiển bởi theme mặc định, không được hardcode vào framework như flex-col hoặc pointer-events-none.
Để có danh sách tất cả các biến theme mặc định, xem tham chiếu biến theme mặc định.
Các biến theme mặc định rất đa năng và phù hợp để xây dựng các thiết kế khác nhau đáng kể, nhưng chúng vẫn chỉ là một điểm khởi đầu. Rất phổ biến để tùy chỉnh những thứ như bảng màu, font chữ, và bóng để xây dựng chính xác thiết kế mà bạn có trong đầu.
Sử dụng @theme để xác định các biến theme mới và mở rộng theme mặc định:
@import "tailwindcss";@theme { --font-script: Great Vibes, cursive;}Điều này làm cho một lớp tiện ích font-script mới có sẵn mà bạn có thể sử dụng trong HTML của mình, giống như các tiện ích font-sans hoặc font-mono mặc định:
<p class="font-script">This will use the Great Vibes font family.</p>Tìm hiểu thêm về cách các biến theme ánh xạ tới các lớp tiện ích và biến thể khác nhau trong tài liệu không gian tên biến theme.
Ghi đè một giá trị biến theme mặc định bằng cách xác định lại nó trong @theme:
@import "tailwindcss";@theme { --breakpoint-sm: 30rem;}Bây giờ biến thể sm:* sẽ kích hoạt ở 30rem thay vì kích thước viewport 40rem mặc định:
<div class="grid grid-cols-1 sm:grid-cols-3"> <!-- ... --></div>Để ghi đè hoàn toàn một không gian tên trong theme mặc định, hãy đặt toàn bộ không gian tên thành initial bằng cách sử dụng cú pháp dấu sao đặc biệt:
@import "tailwindcss";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}Khi bạn làm điều này, tất cả các tiện ích mặc định sử dụng không gian tên đó (như bg-red-500) sẽ bị xóa, và chỉ các giá trị tùy chỉnh của bạn (như bg-midnight) sẽ có sẵn.
Tìm hiểu thêm về cách các biến theme ánh xạ tới các lớp tiện ích và biến thể khác nhau trong tài liệu không gian tên biến theme.
Để vô hiệu hóa hoàn toàn theme mặc định và chỉ sử dụng các giá trị tùy chỉnh, hãy đặt không gian tên biến theme toàn cầu thành initial:
@import "tailwindcss";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}Bây giờ không có lớp tiện ích mặc định nào được điều khiển bởi các biến theme sẽ có sẵn, và bạn sẽ chỉ có thể sử dụng các lớp tiện ích khớp với các biến theme tùy chỉnh của bạn như font-body và text-dusk.
Xác định các quy tắc @keyframes cho các biến theme --animate-* của bạn trong @theme để bao gồm chúng trong CSS được tạo của bạn:
@import "tailwindcss";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }}Nếu bạn muốn các quy tắc @keyframes tùy chỉnh của mình luôn được bao gồm ngay cả khi không thêm một biến theme --animate-*, hãy xác định chúng bên ngoài @theme thay thế.
Khi xác định các biến theme tham chiếu các biến khác, hãy sử dụng tùy chọn inline:
@import "tailwindcss";@theme inline { --font-sans: var(--font-inter);}Sử dụng tùy chọn inline, lớp tiện ích sẽ sử dụng giá trị biến theme thay vì tham chiếu biến theme thực tế:
.font-sans { font-family: var(--font-inter);}Nếu không sử dụng inline, các lớp tiện ích của bạn có thể giải quyết thành các giá trị không mong muốn vì cách các biến được giải quyết trong CSS.
Ví dụ, văn bản này sẽ quay trở lại sans-serif thay vì sử dụng Inter như bạn có thể mong đợi:
<div id="parent" style="--font-sans: var(--font-inter, sans-serif);"> <div id="child" style="--font-inter: Inter; font-family: var(--font-sans);"> This text will use the sans-serif font, not Inter. </div></div>Điều này xảy ra vì var(--font-sans) được giải quyết ở nơi --font-sans được xác định (trên #parent), và --font-inter không có giá trị ở đó vì nó không được xác định cho đến khi sâu hơn trong cây (trên #child).
Theo mặc định, chỉ các biến CSS được sử dụng mới được tạo trong đầu ra CSS cuối cùng. Nếu bạn muốn luôn tạo tất cả các biến CSS, bạn có thể sử dụng tùy chọn theme static:
@import "tailwindcss";@theme static { --color-primary: var(--color-red-500); --color-secondary: var(--color-blue-500);}Vì các biến theme được xác định trong CSS, việc chia sẻ chúng giữa các dự án chỉ là vấn đề ném chúng vào tệp CSS riêng của chúng mà bạn có thể import trong mỗi dự án:
@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}Sau đó, bạn có thể sử dụng @import để bao gồm các biến theme của mình trong các dự án khác:
@import "tailwindcss";@import "../brand/theme.css";Bạn có thể đặt các biến theme được chia sẻ như thế này trong gói riêng của chúng trong các thiết lập monorepo hoặc thậm chí xuất bản chúng lên NPM và import chúng giống như bất kỳ tệp CSS của bên thứ ba nào khác.
Tất cả các biến theme của bạn được chuyển thành các biến CSS thông thường khi bạn biên dịch CSS của mình:
:root { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}Điều này giúp dễ dàng tham chiếu tất cả các design token của bạn trong bất kỳ CSS tùy chỉnh hoặc kiểu nội dòng nào của bạn.
Sử dụng các biến theme của bạn để truy cập vào các design token của bạn khi bạn đang viết CSS tùy chỉnh cần sử dụng cùng các giá trị:
@import "tailwindcss";@layer components { .typography { p { font-size: var(--text-base); color: var(--color-gray-700); } h1 { font-size: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } }}Điều này thường hữu ích khi tạo kiểu cho HTML mà bạn không kiểm soát, như nội dung Markdown đến từ cơ sở dữ liệu hoặc API và được hiển thị thành HTML.
Sử dụng các biến theme trong các giá trị tùy ý có thể hữu ích, đặc biệt là khi kết hợp với hàm calc().
<div class="relative rounded-xl"> <div class="absolute inset-px rounded-[calc(var(--radius-xl)-1px)]"> <!-- ... --> </div> <!-- ... --></div>Trong ví dụ trên, chúng tôi đang trừ 1px từ giá trị --radius-xl trên một phần tử inset lồng nhau để đảm bảo nó có bán kính viền đồng tâm.
Hầu hết thời gian khi bạn cần tham chiếu các biến theme của mình trong JS, bạn chỉ cần sử dụng các biến CSS trực tiếp, giống như bất kỳ giá trị CSS nào khác.
Ví dụ, thư viện Motion phổ biến cho React cho phép bạn tạo hoạt ảnh đến và đi từ các giá trị biến CSS:
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />Nếu bạn cần quyền truy cập vào giá trị biến CSS đã giải quyết trong JS, bạn có thể sử dụng getComputedStyle để lấy giá trị của một biến theme trên document root:
let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl");Để tham khảo, đây là danh sách đầy đủ các biến theme được bao gồm theo mặc định khi bạn import Tailwind CSS vào dự án của mình:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }}