Tailwind classes in OCaml
anil.recoil.org
1# Tailwind CSS v4 LLM Development Guidelines
2
3You are an expert web developer specializing in Tailwind CSS v4. Follow these guidelines when writing code or providing recommendations.
4
5## Core Principles
6
7Tailwind CSS v4 is a complete rewrite with a new high-performance Oxide engine, CSS-first configuration, and modern web platform features. It requires modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) and is NOT compatible with older browsers.
8
9## Installation & Setup
10
11### Basic Setup
12```css
13/* styles.css */
14@import "tailwindcss";
15```
16
17### With Vite
18```js
19// vite.config.js
20import { defineConfig } from 'vite'
21import tailwindcss from '@tailwindcss/vite'
22
23export default defineConfig({
24 plugins: [tailwindcss()]
25})
26```
27
28### Package Installation
29```bash
30npm install tailwindcss@next @tailwindcss/vite@next
31```
32
33## Configuration (CSS-First)
34
35**IMPORTANT**: v4 uses CSS-first configuration, NOT JavaScript config files. Use the `@theme` directive in your CSS file:
36
37```css
38@import "tailwindcss";
39
40@theme {
41 /* Colors (use OKLCH for wider gamut) */
42 --color-brand-50: oklch(0.98 0.01 142.12);
43 --color-brand-500: oklch(0.64 0.15 142.12);
44 --color-brand-900: oklch(0.25 0.08 142.12);
45
46 /* Typography */
47 --font-display: "Satoshi", "Inter", sans-serif;
48 --font-body: "Inter", system-ui, sans-serif;
49
50 /* Spacing */
51 --spacing-18: 4.5rem;
52 --spacing-72: 18rem;
53
54 /* Breakpoints */
55 --breakpoint-3xl: 1920px;
56 --breakpoint-4xl: 2560px;
57
58 /* Shadows */
59 --shadow-brutal: 8px 8px 0px 0px #000;
60
61 /* Animation */
62 --animate-wiggle: wiggle 1s ease-in-out infinite;
63}
64
65/* Define keyframes for animations */
66@keyframes wiggle {
67 0%, 100% { transform: rotate(-3deg); }
68 50% { transform: rotate(3deg); }
69}
70```
71
72### Legacy Config Support (if needed)
73```css
74@import "tailwindcss";
75@config "./tailwind.config.js";
76```
77
78## Breaking Changes from v3
79
80### Import Changes
81- ❌ `@tailwind base; @tailwind components; @tailwind utilities;`
82- ✅ `@import "tailwindcss";`
83
84### Removed Utilities
85- `text-opacity-*` → Use `text-{color}/{opacity}` instead
86- `bg-opacity-*` → Use `bg-{color}/{opacity}` instead
87- `border-opacity-*` → Use `border-{color}/{opacity}` instead
88- `flex-grow-*` → Use `grow-*`
89- `flex-shrink-*` → Use `shrink-*`
90- `decoration-slice` → Use `box-decoration-slice`
91
92### Renamed Utilities
93- `shadow-sm` → `shadow-xs`
94- `rounded-sm` → `rounded-xs`
95- `blur-sm` → `blur-xs`
96- `bg-gradient-*` → `bg-linear-*`
97
98### Default Behavior Changes
99- **Border**: No longer defaults to gray-200, uses `currentColor`
100- **Ring**: Changed from 3px blue to 1px `currentColor`
101- **Outline**: Now 1px by default for consistency
102
103## Custom Utilities
104
105Use the `@utility` directive instead of `@layer utilities`:
106
107```css
108@utility btn {
109 padding: 0.5rem 1rem;
110 border-radius: 0.375rem;
111 font-weight: 500;
112 transition: all 0.2s;
113}
114
115@utility btn-primary {
116 background: var(--color-blue-600);
117 color: white;
118
119 &:hover {
120 background: var(--color-blue-700);
121 }
122}
123
124/* Functional utilities with parameters */
125@utility margin-auto {
126 margin: auto;
127}
128
129@utility flex-center {
130 display: flex;
131 justify-content: center;
132 align-items: center;
133}
134```
135
136## Custom Variants
137
138```css
139@custom-variant theme-dark {
140 &:where([data-theme="dark"] *) {
141 @slot;
142 }
143}
144
145@custom-variant any-hover {
146 @media (any-hover: hover) {
147 &:hover {
148 @slot;
149 }
150 }
151}
152```
153
154## New Features in v4
155
156### Container Queries (Built-in)
157```html
158<div class="@container">
159 <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">
160 <div class="@min-w-64:text-lg @max-w-96:bg-blue-100">
161 Responsive to container size
162 </div>
163 </div>
164</div>
165```
166
167### 3D Transforms
168```html
169<div class="perspective-1000">
170 <div class="rotate-x-45 rotate-y-12 scale-z-110 translate-z-24 transform-3d">
171 3D transformed element
172 </div>
173</div>
174```
175
176### Enhanced Gradients
177```html
178<!-- Linear gradients with angles -->
179<div class="bg-linear-45 from-blue-500 to-purple-500"></div>
180
181<!-- Radial gradients -->
182<div class="bg-radial from-red-500 via-yellow-500 to-orange-500"></div>
183
184<!-- Conic gradients -->
185<div class="bg-conic from-pink-500 via-blue-500 to-green-500"></div>
186```
187
188### Text Shadows
189```html
190<h1 class="text-shadow-lg text-shadow-blue-500/50">
191 Text with colored shadow
192</h1>
193```
194
195### Mask Utilities
196```html
197<div class="mask-radial mask-cover">
198 <img src="image.jpg" alt="Masked image" />
199</div>
200```
201
202### New Variants
203
204#### @starting-style (for animations)
205```html
206<div class="opacity-100 @starting-style:opacity-0 transition-opacity">
207 Animates in on mount
208</div>
209```
210
211#### not-* variant
212```html
213<div class="bg-blue-500 not-hover:bg-gray-500">
214 Blue except when hovering
215</div>
216```
217
218#### nth-* variants
219```html
220<div class="nth-2:bg-red-500 nth-odd:bg-blue-500">
221 Nth child styling
222</div>
223```
224
225#### inert variant
226```html
227<div class="inert:opacity-50 inert:pointer-events-none">
228 Styled when inert
229</div>
230```
231
232#### in-* variant (like group-* but without group class)
233```html
234<article>
235 <h2 class="in-article:text-lg">Styled when inside article</h2>
236</article>
237```
238
239### Modern Color System
240v4 uses OKLCH color space for wider gamut support:
241
242```css
243@theme {
244 --color-brand-primary: oklch(0.7 0.15 180);
245 --color-brand-accent: oklch(0.8 0.2 45);
246}
247```
248
249## Multi-Theme Strategy
250
251```css
252@import "tailwindcss";
253
254@theme {
255 --color-primary: oklch(0.5 0.2 240);
256 --color-background: oklch(0.98 0.01 240);
257}
258
259@layer base {
260 [data-theme='dark'] {
261 --color-primary: oklch(0.7 0.2 240);
262 --color-background: oklch(0.15 0.02 240);
263 }
264
265 [data-theme='high-contrast'] {
266 --color-primary: oklch(0.0 0 0);
267 --color-background: oklch(1.0 0 0);
268 }
269}
270```
271
272## Best Practices
273
274### 1. Use CSS Variables for Dynamic Values
275```html
276<div class="bg-[var(--dynamic-color)] text-[var(--dynamic-size)]">
277 Dynamic styling
278</div>
279```
280
281### 2. Leverage the New Color System
282```html
283<!-- Better contrast and vibrancy with OKLCH -->
284<div class="bg-blue-500 text-white">
285 Vivid colors on modern displays
286</div>
287```
288
289### 3. Container Queries for True Responsive Design
290```html
291<div class="@container">
292 <div class="p-4 @lg:p-8 @xl:p-12">
293 Responds to container, not viewport
294 </div>
295</div>
296```
297
298### 4. Modern CSS Features
299```html
300<!-- Native cascade layers -->
301<div class="layer-[utilities]:z-10">
302 Proper layer management
303</div>
304
305<!-- Color mixing -->
306<div class="bg-blue-500/50">
307 Uses color-mix() under the hood
308</div>
309```
310
311## Performance Optimizations
312
313v4's Oxide engine provides:
314- 5x faster full builds
315- 100x faster incremental builds
316- Automatic content detection
317- Built-in import handling
318- Native vendor prefixing
319
320## File Organization
321
322```
323src/
324├── styles/
325│ ├── main.css # @import "tailwindcss" + @theme
326│ ├── components.css # @utility definitions
327│ └── utilities.css # Additional @utility definitions
328└── components/
329 └── *.vue/jsx/html # Your components
330```
331
332## Common Patterns
333
334### Theme-aware Components
335```css
336@utility card {
337 background: var(--color-background);
338 border: 1px solid var(--color-border);
339 border-radius: 0.5rem;
340 padding: 1.5rem;
341 box-shadow: var(--shadow-sm);
342}
343```
344
345### Responsive Typography
346```html
347<h1 class="text-2xl @sm:text-3xl @lg:text-4xl @xl:text-5xl">
348 Container-responsive heading
349</h1>
350```
351
352### Animation with @starting-style
353```html
354<div class="translate-y-0 @starting-style:translate-y-full transition-transform duration-500">
355 Slides up on mount
356</div>
357```
358
359## Debugging Tips
360
3611. **Use browser dev tools** to inspect CSS variables
3622. **Check cascade layers** in dev tools
3633. **Verify modern browser support** for OKLCH colors
3644. **Use @reference** for CSS modules/component styles
3655. **Restart dev server** after major theme changes
366
367## Migration from v3
368
3691. Replace `@tailwind` directives with `@import "tailwindcss"`
3702. Move config from JS to CSS using `@theme`
3713. Update deprecated utility classes
3724. Replace `@layer utilities` with `@utility`
3735. Test in modern browsers only
3746. Use the official upgrade tool: `npx @tailwindcss/upgrade@next`
375
376## Complete Utility Class Reference
377
378### Layout
379
380#### Display
381```
382block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, list-item, hidden
383```
384
385#### Position
386```
387static, fixed, absolute, relative, sticky
388```
389
390#### Top/Right/Bottom/Left
391```
392inset-0, inset-x-0, inset-y-0, start-0, end-0, top-0, right-0, bottom-0, left-0
393inset-px, inset-x-px, inset-y-px, start-px, end-px, top-px, right-px, bottom-px, left-px
394inset-0.5, inset-1, inset-1.5, inset-2, inset-2.5, inset-3, inset-3.5, inset-4, inset-5, inset-6, inset-7, inset-8, inset-9, inset-10, inset-11, inset-12, inset-14, inset-16, inset-20, inset-24, inset-28, inset-32, inset-36, inset-40, inset-44, inset-48, inset-52, inset-56, inset-60, inset-64, inset-72, inset-80, inset-96
395inset-auto, inset-1/2, inset-1/3, inset-2/3, inset-1/4, inset-2/4, inset-3/4, inset-full
396```
397
398#### Visibility & Z-Index
399```
400visible, invisible, collapse
401z-0, z-10, z-20, z-30, z-40, z-50, z-auto
402```
403
404#### Overflow
405```
406overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll
407overflow-x-auto, overflow-x-hidden, overflow-x-clip, overflow-x-visible, overflow-x-scroll
408overflow-y-auto, overflow-y-hidden, overflow-y-clip, overflow-y-visible, overflow-y-scroll
409```
410
411### Flexbox & Grid
412
413#### Flex Direction
414```
415flex-row, flex-row-reverse, flex-col, flex-col-reverse
416```
417
418#### Flex Wrap
419```
420flex-wrap, flex-wrap-reverse, flex-nowrap
421```
422
423#### Flex
424```
425flex-1, flex-auto, flex-initial, flex-none
426```
427
428#### Grow & Shrink
429```
430grow, grow-0, shrink, shrink-0
431```
432
433#### Order
434```
435order-1, order-2, order-3, order-4, order-5, order-6, order-7, order-8, order-9, order-10, order-11, order-12, order-first, order-last, order-none
436```
437
438#### Grid Template Columns
439```
440grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none, grid-cols-subgrid
441```
442
443#### Grid Column Start/End
444```
445col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12, col-span-full
446col-start-1, col-start-2, col-start-3, col-start-4, col-start-5, col-start-6, col-start-7, col-start-8, col-start-9, col-start-10, col-start-11, col-start-12, col-start-13, col-start-auto
447col-end-1, col-end-2, col-end-3, col-end-4, col-end-5, col-end-6, col-end-7, col-end-8, col-end-9, col-end-10, col-end-11, col-end-12, col-end-13, col-end-auto
448```
449
450#### Grid Template Rows
451```
452grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-7, grid-rows-8, grid-rows-9, grid-rows-10, grid-rows-11, grid-rows-12, grid-rows-none, grid-rows-subgrid
453```
454
455#### Grid Row Start/End
456```
457row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6, row-span-7, row-span-8, row-span-9, row-span-10, row-span-11, row-span-12, row-span-full
458row-start-1, row-start-2, row-start-3, row-start-4, row-start-5, row-start-6, row-start-7, row-start-8, row-start-9, row-start-10, row-start-11, row-start-12, row-start-13, row-start-auto
459row-end-1, row-end-2, row-end-3, row-end-4, row-end-5, row-end-6, row-end-7, row-end-8, row-end-9, row-end-10, row-end-11, row-end-12, row-end-13, row-end-auto
460```
461
462#### Gap
463```
464gap-0, gap-x-0, gap-y-0, gap-px, gap-x-px, gap-y-px
465gap-0.5, gap-1, gap-1.5, gap-2, gap-2.5, gap-3, gap-3.5, gap-4, gap-5, gap-6, gap-7, gap-8, gap-9, gap-10, gap-11, gap-12, gap-14, gap-16, gap-20, gap-24, gap-28, gap-32, gap-36, gap-40, gap-44, gap-48, gap-52, gap-56, gap-60, gap-64, gap-72, gap-80, gap-96
466```
467
468#### Justify & Align
469```
470justify-normal, justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, justify-stretch
471justify-items-start, justify-items-end, justify-items-center, justify-items-stretch
472justify-self-auto, justify-self-start, justify-self-end, justify-self-center, justify-self-stretch
473align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
474align-content-normal, align-content-center, align-content-start, align-content-end, align-content-between, align-content-around, align-content-evenly, align-content-baseline, align-content-stretch
475align-self-auto, align-self-start, align-self-end, align-self-center, align-self-stretch, align-self-baseline
476place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-baseline, place-content-stretch
477place-items-start, place-items-end, place-items-center, place-items-baseline, place-items-stretch
478place-self-auto, place-self-start, place-self-end, place-self-center, place-self-stretch
479```
480
481### Spacing
482
483#### Padding
484```
485p-0, p-px, p-0.5, p-1, p-1.5, p-2, p-2.5, p-3, p-3.5, p-4, p-5, p-6, p-7, p-8, p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, p-28, p-32, p-36, p-40, p-44, p-48, p-52, p-56, p-60, p-64, p-72, p-80, p-96
486px-0, py-0, pl-0, pr-0, pt-0, pb-0, ps-0, pe-0
487```
488
489#### Margin
490```
491m-0, m-px, m-0.5, m-1, m-1.5, m-2, m-2.5, m-3, m-3.5, m-4, m-5, m-6, m-7, m-8, m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, m-28, m-32, m-36, m-40, m-44, m-48, m-52, m-56, m-60, m-64, m-72, m-80, m-96, m-auto
492mx-0, my-0, ml-0, mr-0, mt-0, mb-0, ms-0, me-0
493-m-0, -m-px, -m-0.5, -m-1, -m-1.5, -m-2, -m-2.5, -m-3, -m-3.5, -m-4, -m-5, -m-6, -m-7, -m-8, -m-9, -m-10, -m-11, -m-12, -m-14, -m-16, -m-20, -m-24, -m-28, -m-32, -m-36, -m-40, -m-44, -m-48, -m-52, -m-56, -m-60, -m-64, -m-72, -m-80, -m-96
494```
495
496#### Space Between
497```
498space-x-0, space-x-px, space-x-0.5, space-x-1, space-x-1.5, space-x-2, space-x-2.5, space-x-3, space-x-3.5, space-x-4, space-x-5, space-x-6, space-x-7, space-x-8, space-x-9, space-x-10, space-x-11, space-x-12, space-x-14, space-x-16, space-x-20, space-x-24, space-x-28, space-x-32, space-x-36, space-x-40, space-x-44, space-x-48, space-x-52, space-x-56, space-x-60, space-x-64, space-x-72, space-x-80, space-x-96, space-x-reverse
499space-y-0, space-y-px, space-y-0.5, space-y-1, space-y-1.5, space-y-2, space-y-2.5, space-y-3, space-y-3.5, space-y-4, space-y-5, space-y-6, space-y-7, space-y-8, space-y-9, space-y-10, space-y-11, space-y-12, space-y-14, space-y-16, space-y-20, space-y-24, space-y-28, space-y-32, space-y-36, space-y-40, space-y-44, space-y-48, space-y-52, space-y-56, space-y-60, space-y-64, space-y-72, space-y-80, space-y-96, space-y-reverse
500```
501
502### Sizing
503
504#### Width
505```
506w-0, w-px, w-0.5, w-1, w-1.5, w-2, w-2.5, w-3, w-3.5, w-4, w-5, w-6, w-7, w-8, w-9, w-10, w-11, w-12, w-14, w-16, w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96, w-auto, w-1/2, w-1/3, w-2/3, w-1/4, w-2/4, w-3/4, w-1/5, w-2/5, w-3/5, w-4/5, w-1/6, w-2/6, w-3/6, w-4/6, w-5/6, w-1/12, w-2/12, w-3/12, w-4/12, w-5/12, w-6/12, w-7/12, w-8/12, w-9/12, w-10/12, w-11/12, w-full, w-screen, w-svw, w-lvw, w-dvw, w-min, w-max, w-fit
507```
508
509#### Height
510```
511h-0, h-px, h-0.5, h-1, h-1.5, h-2, h-2.5, h-3, h-3.5, h-4, h-5, h-6, h-7, h-8, h-9, h-10, h-11, h-12, h-14, h-16, h-20, h-24, h-28, h-32, h-36, h-40, h-44, h-48, h-52, h-56, h-60, h-64, h-72, h-80, h-96, h-auto, h-1/2, h-1/3, h-2/3, h-1/4, h-2/4, h-3/4, h-1/5, h-2/5, h-3/5, h-4/5, h-1/6, h-2/6, h-3/6, h-4/6, h-5/6, h-full, h-screen, h-svh, h-lvh, h-dvh, h-min, h-max, h-fit
512```
513
514#### Size (Width + Height)
515```
516size-0, size-px, size-0.5, size-1, size-1.5, size-2, size-2.5, size-3, size-3.5, size-4, size-5, size-6, size-7, size-8, size-9, size-10, size-11, size-12, size-14, size-16, size-20, size-24, size-28, size-32, size-36, size-40, size-44, size-48, size-52, size-56, size-60, size-64, size-72, size-80, size-96, size-auto, size-1/2, size-1/3, size-2/3, size-1/4, size-2/4, size-3/4, size-1/5, size-2/5, size-3/5, size-4/5, size-1/6, size-2/6, size-3/6, size-4/6, size-5/6, size-1/12, size-2/12, size-3/12, size-4/12, size-5/12, size-6/12, size-7/12, size-8/12, size-9/12, size-10/12, size-11/12, size-full, size-min, size-max, size-fit
517```
518
519#### Min/Max Width
520```
521min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit
522max-w-0, max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-7xl, max-w-full, max-w-min, max-w-max, max-w-fit, max-w-prose, max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl
523```
524
525#### Min/Max Height
526```
527min-h-0, min-h-full, min-h-screen, min-h-svh, min-h-lvh, min-h-dvh, min-h-min, min-h-max, min-h-fit
528max-h-0, max-h-px, max-h-0.5, max-h-1, max-h-1.5, max-h-2, max-h-2.5, max-h-3, max-h-3.5, max-h-4, max-h-5, max-h-6, max-h-7, max-h-8, max-h-9, max-h-10, max-h-11, max-h-12, max-h-14, max-h-16, max-h-20, max-h-24, max-h-28, max-h-32, max-h-36, max-h-40, max-h-44, max-h-48, max-h-52, max-h-56, max-h-60, max-h-64, max-h-72, max-h-80, max-h-96, max-h-full, max-h-screen, max-h-svh, max-h-lvh, max-h-dvh, max-h-min, max-h-max, max-h-fit
529```
530
531### Typography
532
533#### Font Family
534```
535font-sans, font-serif, font-mono
536```
537
538#### Font Size
539```
540text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl
541```
542
543#### Font Weight
544```
545font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black
546```
547
548#### Font Style
549```
550italic, not-italic
551```
552
553#### Font Variant Numeric
554```
555normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions
556```
557
558#### Font Stretch (NEW in v4)
559```
560font-stretch-ultra-condensed, font-stretch-extra-condensed, font-stretch-condensed, font-stretch-semi-condensed, font-stretch-normal, font-stretch-semi-expanded, font-stretch-expanded, font-stretch-extra-expanded, font-stretch-ultra-expanded
561```
562
563#### Letter Spacing
564```
565tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest
566```
567
568#### Line Clamp
569```
570line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none
571```
572
573#### Line Height
574```
575leading-3, leading-4, leading-5, leading-6, leading-7, leading-8, leading-9, leading-10, leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose
576```
577
578#### List Style
579```
580list-none, list-disc, list-decimal, list-inside, list-outside
581```
582
583#### Text Align
584```
585text-left, text-center, text-right, text-justify, text-start, text-end
586```
587
588#### Text Color
589```
590text-inherit, text-current, text-transparent, text-black, text-white
591text-slate-50, text-slate-100, text-slate-200, text-slate-300, text-slate-400, text-slate-500, text-slate-600, text-slate-700, text-slate-800, text-slate-900, text-slate-950
592text-gray-50, text-gray-100, text-gray-200, text-gray-300, text-gray-400, text-gray-500, text-gray-600, text-gray-700, text-gray-800, text-gray-900, text-gray-950
593text-zinc-50, text-zinc-100, text-zinc-200, text-zinc-300, text-zinc-400, text-zinc-500, text-zinc-600, text-zinc-700, text-zinc-800, text-zinc-900, text-zinc-950
594text-neutral-50, text-neutral-100, text-neutral-200, text-neutral-300, text-neutral-400, text-neutral-500, text-neutral-600, text-neutral-700, text-neutral-800, text-neutral-900, text-neutral-950
595text-stone-50, text-stone-100, text-stone-200, text-stone-300, text-stone-400, text-stone-500, text-stone-600, text-stone-700, text-stone-800, text-stone-900, text-stone-950
596text-red-50, text-red-100, text-red-200, text-red-300, text-red-400, text-red-500, text-red-600, text-red-700, text-red-800, text-red-900, text-red-950
597text-orange-50, text-orange-100, text-orange-200, text-orange-300, text-orange-400, text-orange-500, text-orange-600, text-orange-700, text-orange-800, text-orange-900, text-orange-950
598text-amber-50, text-amber-100, text-amber-200, text-amber-300, text-amber-400, text-amber-500, text-amber-600, text-amber-700, text-amber-800, text-amber-900, text-amber-950
599text-yellow-50, text-yellow-100, text-yellow-200, text-yellow-300, text-yellow-400, text-yellow-500, text-yellow-600, text-yellow-700, text-yellow-800, text-yellow-900, text-yellow-950
600text-lime-50, text-lime-100, text-lime-200, text-lime-300, text-lime-400, text-lime-500, text-lime-600, text-lime-700, text-lime-800, text-lime-900, text-lime-950
601text-green-50, text-green-100, text-green-200, text-green-300, text-green-400, text-green-500, text-green-600, text-green-700, text-green-800, text-green-900, text-green-950
602text-emerald-50, text-emerald-100, text-emerald-200, text-emerald-300, text-emerald-400, text-emerald-500, text-emerald-600, text-emerald-700, text-emerald-800, text-emerald-900, text-emerald-950
603text-teal-50, text-teal-100, text-teal-200, text-teal-300, text-teal-400, text-teal-500, text-teal-600, text-teal-700, text-teal-800, text-teal-900, text-teal-950
604text-cyan-50, text-cyan-100, text-cyan-200, text-cyan-300, text-cyan-400, text-cyan-500, text-cyan-600, text-cyan-700, text-cyan-800, text-cyan-900, text-cyan-950
605text-sky-50, text-sky-100, text-sky-200, text-sky-300, text-sky-400, text-sky-500, text-sky-600, text-sky-700, text-sky-800, text-sky-900, text-sky-950
606text-blue-50, text-blue-100, text-blue-200, text-blue-300, text-blue-400, text-blue-500, text-blue-600, text-blue-700, text-blue-800, text-blue-900, text-blue-950
607text-indigo-50, text-indigo-100, text-indigo-200, text-indigo-300, text-indigo-400, text-indigo-500, text-indigo-600, text-indigo-700, text-indigo-800, text-indigo-900, text-indigo-950
608text-violet-50, text-violet-100, text-violet-200, text-violet-300, text-violet-400, text-violet-500, text-violet-600, text-violet-700, text-violet-800, text-violet-900, text-violet-950
609text-purple-50, text-purple-100, text-purple-200, text-purple-300, text-purple-400, text-purple-500, text-purple-600, text-purple-700, text-purple-800, text-purple-900, text-purple-950
610text-fuchsia-50, text-fuchsia-100, text-fuchsia-200, text-fuchsia-300, text-fuchsia-400, text-fuchsia-500, text-fuchsia-600, text-fuchsia-700, text-fuchsia-800, text-fuchsia-900, text-fuchsia-950
611text-pink-50, text-pink-100, text-pink-200, text-pink-300, text-pink-400, text-pink-500, text-pink-600, text-pink-700, text-pink-800, text-pink-900, text-pink-950
612text-rose-50, text-rose-100, text-rose-200, text-rose-300, text-rose-400, text-rose-500, text-rose-600, text-rose-700, text-rose-800, text-rose-900, text-rose-950
613```
614
615#### Text Decoration
616```
617underline, overline, line-through, no-underline
618decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy
619decoration-auto, decoration-from-font, decoration-0, decoration-1, decoration-2, decoration-4, decoration-8
620underline-offset-auto, underline-offset-0, underline-offset-1, underline-offset-2, underline-offset-4, underline-offset-8
621```
622
623#### Text Transform
624```
625uppercase, lowercase, capitalize, normal-case
626```
627
628#### Text Overflow
629```
630truncate, text-ellipsis, text-clip
631```
632
633#### Text Shadow (NEW in v4)
634```
635text-shadow-sm, text-shadow, text-shadow-lg, text-shadow-xl, text-shadow-none
636```
637
638#### Overflow Wrap (NEW in v4)
639```
640overflow-wrap-normal, overflow-wrap-break-word, overflow-wrap-anywhere
641```
642
643#### Vertical Align
644```
645align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super
646```
647
648#### Whitespace
649```
650whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces
651```
652
653#### Word Break
654```
655break-normal, break-words, break-all, break-keep
656```
657
658#### Hyphens
659```
660hyphens-none, hyphens-manual, hyphens-auto
661```
662
663#### Content
664```
665content-none
666```
667
668### Backgrounds
669
670#### Background Attachment
671```
672bg-fixed, bg-local, bg-scroll
673```
674
675#### Background Clip
676```
677bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text
678```
679
680#### Background Color
681All color utilities work with `bg-` prefix (same as text colors above)
682
683#### Background Origin
684```
685bg-origin-border, bg-origin-padding, bg-origin-content
686```
687
688#### Background Position
689```
690bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top
691```
692
693#### Background Repeat
694```
695bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space
696```
697
698#### Background Size
699```
700bg-auto, bg-cover, bg-contain
701```
702
703#### Background Image
704```
705bg-none
706bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl
707```
708
709#### Enhanced Gradients (NEW in v4)
710```
711bg-linear-0, bg-linear-45, bg-linear-90, bg-linear-135, bg-linear-180, bg-linear-225, bg-linear-270, bg-linear-315
712bg-radial, bg-radial-at-t, bg-radial-at-tr, bg-radial-at-r, bg-radial-at-br, bg-radial-at-b, bg-radial-at-bl, bg-radial-at-l, bg-radial-at-tl, bg-radial-at-c
713bg-conic, bg-conic-at-t, bg-conic-at-tr, bg-conic-at-r, bg-conic-at-br, bg-conic-at-b, bg-conic-at-bl, bg-conic-at-l, bg-conic-at-tl, bg-conic-at-c
714```
715
716#### Gradient Color Stops
717```
718from-inherit, from-current, from-transparent, from-black, from-white, from-{color}
719via-inherit, via-current, via-transparent, via-black, via-white, via-{color}
720to-inherit, to-current, to-transparent, to-black, to-white, to-{color}
721```
722
723### Borders
724
725#### Border Radius
726```
727rounded-none, rounded-xs, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full
728rounded-s-none, rounded-s-xs, rounded-s-sm, rounded-s, rounded-s-md, rounded-s-lg, rounded-s-xl, rounded-s-2xl, rounded-s-3xl
729rounded-e-none, rounded-e-xs, rounded-e-sm, rounded-e, rounded-e-md, rounded-e-lg, rounded-e-xl, rounded-e-2xl, rounded-e-3xl
730rounded-t-none, rounded-t-xs, rounded-t-sm, rounded-t, rounded-t-md, rounded-t-lg, rounded-t-xl, rounded-t-2xl, rounded-t-3xl
731rounded-r-none, rounded-r-xs, rounded-r-sm, rounded-r, rounded-r-md, rounded-r-lg, rounded-r-xl, rounded-r-2xl, rounded-r-3xl
732rounded-b-none, rounded-b-xs, rounded-b-sm, rounded-b, rounded-b-md, rounded-b-lg, rounded-b-xl, rounded-b-2xl, rounded-b-3xl
733rounded-l-none, rounded-l-xs, rounded-l-sm, rounded-l, rounded-l-md, rounded-l-lg, rounded-l-xl, rounded-l-2xl, rounded-l-3xl
734rounded-ss-none, rounded-ss-xs, rounded-ss-sm, rounded-ss, rounded-ss-md, rounded-ss-lg, rounded-ss-xl, rounded-ss-2xl, rounded-ss-3xl
735rounded-se-none, rounded-se-xs, rounded-se-sm, rounded-se, rounded-se-md, rounded-se-lg, rounded-se-xl, rounded-se-2xl, rounded-se-3xl
736rounded-ee-none, rounded-ee-xs, rounded-ee-sm, rounded-ee, rounded-ee-md, rounded-ee-lg, rounded-ee-xl, rounded-ee-2xl, rounded-ee-3xl
737rounded-es-none, rounded-es-xs, rounded-es-sm, rounded-es, rounded-es-md, rounded-es-lg, rounded-es-xl, rounded-es-2xl, rounded-es-3xl
738rounded-tl-none, rounded-tl-xs, rounded-tl-sm, rounded-tl, rounded-tl-md, rounded-tl-lg, rounded-tl-xl, rounded-tl-2xl, rounded-tl-3xl
739rounded-tr-none, rounded-tr-xs, rounded-tr-sm, rounded-tr, rounded-tr-md, rounded-tr-lg, rounded-tr-xl, rounded-tr-2xl, rounded-tr-3xl
740rounded-br-none, rounded-br-xs, rounded-br-sm, rounded-br, rounded-br-md, rounded-br-lg, rounded-br-xl, rounded-br-2xl, rounded-br-3xl
741rounded-bl-none, rounded-bl-xs, rounded-bl-sm, rounded-bl, rounded-bl-md, rounded-bl-lg, rounded-bl-xl, rounded-bl-2xl, rounded-bl-3xl
742```
743
744#### Border Width
745```
746border-0, border-2, border-4, border-8, border, border-x, border-y, border-s, border-e, border-t, border-r, border-b, border-l
747```
748
749#### Border Color
750All color utilities work with `border-` prefix (same as text/bg colors)
751
752#### Border Style
753```
754border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none
755```
756
757#### Divide Width
758```
759divide-x-0, divide-x-2, divide-x-4, divide-x-8, divide-x, divide-y-0, divide-y-2, divide-y-4, divide-y-8, divide-y, divide-x-reverse, divide-y-reverse
760```
761
762#### Divide Color
763All color utilities work with `divide-` prefix
764
765#### Divide Style
766```
767divide-solid, divide-dashed, divide-dotted, divide-double, divide-none
768```
769
770#### Outline Width
771```
772outline-0, outline-1, outline-2, outline-4, outline-8
773```
774
775#### Outline Color
776All color utilities work with `outline-` prefix
777
778#### Outline Style
779```
780outline-none, outline, outline-dashed, outline-dotted, outline-double
781```
782
783#### Outline Offset
784```
785outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8
786```
787
788#### Ring Width
789```
790ring-0, ring-1, ring-2, ring, ring-4, ring-8, ring-inset
791```
792
793#### Ring Color
794All color utilities work with `ring-` prefix
795
796#### Ring Offset Width
797```
798ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8
799```
800
801#### Ring Offset Color
802All color utilities work with `ring-offset-` prefix
803
804### Effects
805
806#### Box Shadow
807```
808shadow-xs, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none
809```
810
811#### Box Shadow Color
812All color utilities work with `shadow-` prefix
813
814#### Drop Shadow (NEW colored support in v4)
815```
816drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl, drop-shadow-none
817```
818
819#### Opacity
820```
821opacity-0, opacity-5, opacity-10, opacity-15, opacity-20, opacity-25, opacity-30, opacity-35, opacity-40, opacity-45, opacity-50, opacity-55, opacity-60, opacity-65, opacity-70, opacity-75, opacity-80, opacity-85, opacity-90, opacity-95, opacity-100
822```
823
824#### Mix Blend Mode
825```
826mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity, mix-blend-plus-darker, mix-blend-plus-lighter
827```
828
829#### Background Blend Mode
830```
831bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity
832```
833
834### Filters
835
836#### Blur
837```
838blur-none, blur-xs, blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl
839```
840
841#### Brightness
842```
843brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150, brightness-200
844```
845
846#### Contrast
847```
848contrast-0, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150, contrast-200
849```
850
851#### Grayscale
852```
853grayscale-0, grayscale
854```
855
856#### Hue Rotate
857```
858hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180, -hue-rotate-180, -hue-rotate-90, -hue-rotate-60, -hue-rotate-30, -hue-rotate-15
859```
860
861#### Invert
862```
863invert-0, invert
864```
865
866#### Saturate
867```
868saturate-0, saturate-50, saturate-100, saturate-150, saturate-200
869```
870
871#### Sepia
872```
873sepia-0, sepia
874```
875
876#### Backdrop Blur
877```
878backdrop-blur-none, backdrop-blur-xs, backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl
879```
880
881#### Backdrop Brightness
882```
883backdrop-brightness-0, backdrop-brightness-50, backdrop-brightness-75, backdrop-brightness-90, backdrop-brightness-95, backdrop-brightness-100, backdrop-brightness-105, backdrop-brightness-110, backdrop-brightness-125, backdrop-brightness-150, backdrop-brightness-200
884```
885
886#### Backdrop Contrast
887```
888backdrop-contrast-0, backdrop-contrast-50, backdrop-contrast-75, backdrop-contrast-100, backdrop-contrast-125, backdrop-contrast-150, backdrop-contrast-200
889```
890
891#### Backdrop Grayscale
892```
893backdrop-grayscale-0, backdrop-grayscale
894```
895
896#### Backdrop Hue Rotate
897```
898backdrop-hue-rotate-0, backdrop-hue-rotate-15, backdrop-hue-rotate-30, backdrop-hue-rotate-60, backdrop-hue-rotate-90, backdrop-hue-rotate-180, -backdrop-hue-rotate-180, -backdrop-hue-rotate-90, -backdrop-hue-rotate-60, -backdrop-hue-rotate-30, -backdrop-hue-rotate-15
899```
900
901#### Backdrop Invert
902```
903backdrop-invert-0, backdrop-invert
904```
905
906#### Backdrop Saturate
907```
908backdrop-saturate-0, backdrop-saturate-50, backdrop-saturate-100, backdrop-saturate-150, backdrop-saturate-200
909```
910
911#### Backdrop Sepia
912```
913backdrop-sepia-0, backdrop-sepia
914```
915
916### Masks (NEW in v4)
917
918#### Mask Image
919```
920mask-none
921```
922
923#### Mask Size
924```
925mask-auto, mask-cover, mask-contain
926```
927
928#### Mask Repeat
929```
930mask-repeat, mask-no-repeat, mask-repeat-x, mask-repeat-y, mask-repeat-round, mask-repeat-space
931```
932
933#### Mask Position
934```
935mask-bottom, mask-center, mask-left, mask-left-bottom, mask-left-top, mask-right, mask-right-bottom, mask-right-top, mask-top
936```
937
938#### Mask Origin
939```
940mask-origin-border, mask-origin-padding, mask-origin-content
941```
942
943#### Mask Clip
944```
945mask-clip-border, mask-clip-padding, mask-clip-content
946```
947
948#### Mask Composite
949```
950mask-composite-add, mask-composite-subtract, mask-composite-intersect, mask-composite-exclude
951```
952
953#### Mask Mode
954```
955mask-mode-match-source, mask-mode-luminance, mask-mode-alpha
956```
957
958#### Mask Type
959```
960mask-type-luminance, mask-type-alpha
961```
962
963### Tables
964
965#### Border Collapse
966```
967border-collapse, border-separate
968```
969
970#### Border Spacing
971```
972border-spacing-0, border-spacing-px, border-spacing-0.5, border-spacing-1, border-spacing-1.5, border-spacing-2, border-spacing-2.5, border-spacing-3, border-spacing-3.5, border-spacing-4, border-spacing-5, border-spacing-6, border-spacing-7, border-spacing-8, border-spacing-9, border-spacing-10, border-spacing-11, border-spacing-12, border-spacing-14, border-spacing-16, border-spacing-20, border-spacing-24, border-spacing-28, border-spacing-32, border-spacing-36, border-spacing-40, border-spacing-44, border-spacing-48, border-spacing-52, border-spacing-56, border-spacing-60, border-spacing-64, border-spacing-72, border-spacing-80, border-spacing-96
973border-spacing-x-0, border-spacing-y-0 (and all other spacing values)
974```
975
976#### Table Layout
977```
978table-auto, table-fixed
979```
980
981#### Caption Side
982```
983caption-top, caption-bottom
984```
985
986### Transforms
987
988#### Scale
989```
990scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
991scale-x-0, scale-x-50, scale-x-75, scale-x-90, scale-x-95, scale-x-100, scale-x-105, scale-x-110, scale-x-125, scale-x-150
992scale-y-0, scale-y-50, scale-y-75, scale-y-90, scale-y-95, scale-y-100, scale-y-105, scale-y-110, scale-y-125, scale-y-150
993```
994
995#### Scale Z (NEW in v4)
996```
997scale-z-0, scale-z-50, scale-z-75, scale-z-90, scale-z-95, scale-z-100, scale-z-105, scale-z-110, scale-z-125, scale-z-150
998```
999
1000#### Rotate
1001```
1002rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, rotate-180, -rotate-180, -rotate-90, -rotate-45, -rotate-12, -rotate-6, -rotate-3, -rotate-2, -rotate-1
1003```
1004
1005#### Rotate X/Y (NEW in v4)
1006```
1007rotate-x-0, rotate-x-1, rotate-x-2, rotate-x-3, rotate-x-6, rotate-x-12, rotate-x-45, rotate-x-90, rotate-x-180, -rotate-x-180, -rotate-x-90, -rotate-x-45, -rotate-x-12, -rotate-x-6, -rotate-x-3, -rotate-x-2, -rotate-x-1
1008rotate-y-0, rotate-y-1, rotate-y-2, rotate-y-3, rotate-y-6, rotate-y-12, rotate-y-45, rotate-y-90, rotate-y-180, -rotate-y-180, -rotate-y-90, -rotate-y-45, -rotate-y-12, -rotate-y-6, -rotate-y-3, -rotate-y-2, -rotate-y-1
1009```
1010
1011#### Translate
1012```
1013translate-x-0, translate-x-px, translate-x-0.5, translate-x-1, translate-x-1.5, translate-x-2, translate-x-2.5, translate-x-3, translate-x-3.5, translate-x-4, translate-x-5, translate-x-6, translate-x-7, translate-x-8, translate-x-9, translate-x-10, translate-x-11, translate-x-12, translate-x-14, translate-x-16, translate-x-20, translate-x-24, translate-x-28, translate-x-32, translate-x-36, translate-x-40, translate-x-44, translate-x-48, translate-x-52, translate-x-56, translate-x-60, translate-x-64, translate-x-72, translate-x-80, translate-x-96, translate-x-1/2, translate-x-1/3, translate-x-2/3, translate-x-1/4, translate-x-2/4, translate-x-3/4, translate-x-full
1014translate-y-0, translate-y-px, translate-y-0.5, translate-y-1, translate-y-1.5, translate-y-2, translate-y-2.5, translate-y-3, translate-y-3.5, translate-y-4, translate-y-5, translate-y-6, translate-y-7, translate-y-8, translate-y-9, translate-y-10, translate-y-11, translate-y-12, translate-y-14, translate-y-16, translate-y-20, translate-y-24, translate-y-28, translate-y-32, translate-y-36, translate-y-40, translate-y-44, translate-y-48, translate-y-52, translate-y-56, translate-y-60, translate-y-64, translate-y-72, translate-y-80, translate-y-96, translate-y-1/2, translate-y-1/3, translate-y-2/3, translate-y-1/4, translate-y-2/4, translate-y-3/4, translate-y-full
1015```
1016
1017#### Translate Z (NEW in v4)
1018```
1019translate-z-0, translate-z-px, translate-z-0.5, translate-z-1, translate-z-1.5, translate-z-2, translate-z-2.5, translate-z-3, translate-z-3.5, translate-z-4, translate-z-5, translate-z-6, translate-z-7, translate-z-8, translate-z-9, translate-z-10, translate-z-11, translate-z-12, translate-z-14, translate-z-16, translate-z-20, translate-z-24, translate-z-28, translate-z-32, translate-z-36, translate-z-40, translate-z-44, translate-z-48, translate-z-52, translate-z-56, translate-z-60, translate-z-64, translate-z-72, translate-z-80, translate-z-96
1020```
1021
1022#### Skew
1023```
1024skew-x-0, skew-x-1, skew-x-2, skew-x-3, skew-x-6, skew-x-12, -skew-x-12, -skew-x-6, -skew-x-3, -skew-x-2, -skew-x-1
1025skew-y-0, skew-y-1, skew-y-2, skew-y-3, skew-y-6, skew-y-12, -skew-y-12, -skew-y-6, -skew-y-3, -skew-y-2, -skew-y-1
1026```
1027
1028#### Transform Origin
1029```
1030origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left
1031```
1032
1033#### Transform Style (NEW in v4)
1034```
1035transform-style-flat, transform-style-preserve-3d
1036```
1037
1038#### Perspective (NEW in v4)
1039```
1040perspective-none, perspective-250, perspective-500, perspective-750, perspective-1000, perspective-distant
1041```
1042
1043#### Perspective Origin (NEW in v4)
1044```
1045perspective-origin-center, perspective-origin-top, perspective-origin-top-right, perspective-origin-right, perspective-origin-bottom-right, perspective-origin-bottom, perspective-origin-bottom-left, perspective-origin-left, perspective-origin-top-left
1046```
1047
1048### Interactivity
1049
1050#### Accent Color
1051```
1052accent-auto, accent-inherit, accent-current, accent-transparent, accent-black, accent-white
1053accent-{color} (all color utilities work with accent- prefix)
1054```
1055
1056#### Appearance
1057```
1058appearance-none, appearance-auto
1059```
1060
1061#### Cursor
1062```
1063cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-context-menu, cursor-progress, cursor-cell, cursor-crosshair, cursor-vertical-text, cursor-alias, cursor-copy, cursor-no-drop, cursor-grab, cursor-grabbing, cursor-all-scroll, cursor-col-resize, cursor-row-resize, cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-se-resize, cursor-sw-resize, cursor-ew-resize, cursor-ns-resize, cursor-nesw-resize, cursor-nwse-resize, cursor-zoom-in, cursor-zoom-out
1064```
1065
1066#### Caret Color
1067All color utilities work with `caret-` prefix
1068
1069#### Pointer Events
1070```
1071pointer-events-none, pointer-events-auto
1072```
1073
1074#### Resize
1075```
1076resize-none, resize, resize-y, resize-x
1077```
1078
1079#### Scroll Behavior
1080```
1081scroll-auto, scroll-smooth
1082```
1083
1084#### Scroll Margin
1085```
1086scroll-m-0, scroll-m-px, scroll-m-0.5, scroll-m-1, scroll-m-1.5, scroll-m-2, scroll-m-2.5, scroll-m-3, scroll-m-3.5, scroll-m-4, scroll-m-5, scroll-m-6, scroll-m-7, scroll-m-8, scroll-m-9, scroll-m-10, scroll-m-11, scroll-m-12, scroll-m-14, scroll-m-16, scroll-m-20, scroll-m-24, scroll-m-28, scroll-m-32, scroll-m-36, scroll-m-40, scroll-m-44, scroll-m-48, scroll-m-52, scroll-m-56, scroll-m-60, scroll-m-64, scroll-m-72, scroll-m-80, scroll-m-96
1087scroll-mx-0, scroll-my-0, scroll-ms-0, scroll-me-0, scroll-mt-0, scroll-mr-0, scroll-mb-0, scroll-ml-0 (and all spacing values)
1088```
1089
1090#### Scroll Padding
1091```
1092scroll-p-0, scroll-p-px, scroll-p-0.5, scroll-p-1, scroll-p-1.5, scroll-p-2, scroll-p-2.5, scroll-p-3, scroll-p-3.5, scroll-p-4, scroll-p-5, scroll-p-6, scroll-p-7, scroll-p-8, scroll-p-9, scroll-p-10, scroll-p-11, scroll-p-12, scroll-p-14, scroll-p-16, scroll-p-20, scroll-p-24, scroll-p-28, scroll-p-32, scroll-p-36, scroll-p-40, scroll-p-44, scroll-p-48, scroll-p-52, scroll-p-56, scroll-p-60, scroll-p-64, scroll-p-72, scroll-p-80, scroll-p-96
1093scroll-px-0, scroll-py-0, scroll-ps-0, scroll-pe-0, scroll-pt-0, scroll-pr-0, scroll-pb-0, scroll-pl-0 (and all spacing values)
1094```
1095
1096#### Scroll Snap Align
1097```
1098snap-start, snap-end, snap-center, snap-align-none
1099```
1100
1101#### Scroll Snap Stop
1102```
1103snap-normal, snap-always
1104```
1105
1106#### Scroll Snap Type
1107```
1108snap-none, snap-x, snap-y, snap-both, snap-mandatory, snap-proximity
1109```
1110
1111#### Touch Action
1112```
1113touch-auto, touch-none, touch-pan-x, touch-pan-left, touch-pan-right, touch-pan-y, touch-pan-up, touch-pan-down, touch-pinch-zoom, touch-manipulation
1114```
1115
1116#### User Select
1117```
1118select-none, select-text, select-all, select-auto
1119```
1120
1121#### Will Change
1122```
1123will-change-auto, will-change-scroll, will-change-contents, will-change-transform
1124```
1125
1126### SVG
1127
1128#### Fill
1129```
1130fill-none, fill-inherit, fill-current, fill-transparent, fill-black, fill-white
1131fill-{color} (all color utilities work with fill- prefix)
1132```
1133
1134#### Stroke
1135```
1136stroke-none, stroke-inherit, stroke-current, stroke-transparent, stroke-black, stroke-white
1137stroke-{color} (all color utilities work with stroke- prefix)
1138```
1139
1140#### Stroke Width
1141```
1142stroke-0, stroke-1, stroke-2
1143```
1144
1145### Accessibility
1146
1147#### Screen Readers
1148```
1149sr-only, not-sr-only
1150```
1151
1152#### Forced Color Adjust
1153```
1154forced-color-adjust-auto, forced-color-adjust-none
1155```
1156
1157### Container Queries (NEW in v4)
1158
1159#### Container Type
1160```
1161@container, @container-normal, @container-size, @container-inline-size
1162```
1163
1164#### Container Query Variants
1165```
1166@xs:, @sm:, @md:, @lg:, @xl:, @2xl:, @3xl:, @4xl:, @5xl:, @6xl:, @7xl:
1167@min-w-0:, @min-w-xs:, @min-w-sm:, @min-w-md:, @min-w-lg:, @min-w-xl:, @min-w-2xl:, @min-w-3xl:, @min-w-4xl:, @min-w-5xl:, @min-w-6xl:, @min-w-7xl:
1168@max-w-xs:, @max-w-sm:, @max-w-md:, @max-w-lg:, @max-w-xl:, @max-w-2xl:, @max-w-3xl:, @max-w-4xl:, @max-w-5xl:, @max-w-6xl:, @max-w-7xl:
1169@min-h-0:, @min-h-xs:, @min-h-sm:, @min-h-md:, @min-h-lg:, @min-h-xl:, @min-h-2xl:, @min-h-3xl:, @min-h-4xl:, @min-h-5xl:, @min-h-6xl:, @min-h-7xl:
1170@max-h-xs:, @max-h-sm:, @max-h-md:, @max-h-lg:, @max-h-xl:, @max-h-2xl:, @max-h-3xl:, @max-h-4xl:, @max-h-5xl:, @max-h-6xl:, @max-h-7xl:
1171```
1172
1173### Responsive Design
1174
1175#### Breakpoint Variants
1176```
1177sm:, md:, lg:, xl:, 2xl:
1178max-sm:, max-md:, max-lg:, max-xl:, max-2xl:
1179```
1180
1181### State Variants
1182
1183#### Hover, Focus, etc.
1184```
1185hover:, focus:, focus-within:, focus-visible:, active:, visited:, target:, disabled:, enabled:, checked:, indeterminate:, default:, required:, valid:, invalid:, in-range:, out-of-range:, placeholder-shown:, autofill:, read-only:
1186```
1187
1188#### Group States
1189```
1190group-hover:, group-focus:, group-focus-within:, group-focus-visible:, group-active:, group-visited:, group-target:, group-disabled:, group-enabled:, group-checked:, group-indeterminate:, group-default:, group-required:, group-valid:, group-invalid:, group-in-range:, group-out-of-range:, group-placeholder-shown:, group-autofill:, group-read-only:
1191```
1192
1193#### Peer States
1194```
1195peer-hover:, peer-focus:, peer-focus-within:, peer-focus-visible:, peer-active:, peer-visited:, peer-target:, peer-disabled:, peer-enabled:, peer-checked:, peer-indeterminate:, peer-default:, peer-required:, peer-valid:, peer-invalid:, peer-in-range:, peer-out-of-range:, peer-placeholder-shown:, peer-autofill:, peer-read-only:
1196```
1197
1198#### NEW Variants in v4
1199```
1200@starting-style:, not-*, nth-*, in-*, inert:, open: (for popovers)
1201```
1202
1203### Media Queries
1204
1205#### Dark Mode
1206```
1207dark:
1208```
1209
1210#### Motion
1211```
1212motion-safe:, motion-reduce:
1213```
1214
1215#### Contrast
1216```
1217contrast-more:, contrast-less:
1218```
1219
1220#### Print
1221```
1222print:
1223```
1224
1225#### Orientation
1226```
1227portrait:, landscape:
1228```
1229
1230### Content
1231```
1232content-none, content-['text']
1233```
1234
1235### Arbitrary Values
1236You can use arbitrary values with square brackets for any property:
1237```
1238w-[123px], h-[456px], text-[#bada55], bg-[url('...')], top-[117px], left-[344px]
1239m-[12px], p-[24px], grid-cols-[200px_minmax(900px,_1fr)_100px]
1240```
1241
1242### Arbitrary Properties
1243```
1244[mask-type:luminance], [tab-size:4], [@supports(backdrop-filter:blur(0))]:bg-white/75
1245```
1246
1247### Arbitrary Variants
1248```
1249[&:nth-child(3)]:, [&:hover]:, [&_p]:, [@media(min-width:600px)]:
1250[@supports(backdrop-filter:blur(0))]:, [data-theme="dark"]:
1251```
1252
1253## Common v4 Pitfalls to Avoid
1254
1255### Don't Use These Deprecated Patterns
1256- ❌ `@tailwind base; @tailwind components; @tailwind utilities;`
1257- ❌ `text-opacity-50` → Use `text-white/50` instead
1258- ❌ `bg-opacity-25` → Use `bg-blue-500/25` instead
1259- ❌ `border` without color (now uses currentColor, not gray-200)
1260- ❌ `ring` without explicit width (now 1px, was 3px)
1261- ❌ `@layer utilities` → Use `@utility` instead
1262- ❌ JavaScript config for new projects → Use CSS `@theme`
1263
1264### Modern v4 Alternatives
1265- ✅ `@import "tailwindcss";`
1266- ✅ `text-white/50` for semi-transparent text
1267- ✅ `bg-blue-500/25` for semi-transparent backgrounds
1268- ✅ `border border-gray-200` for explicit border color
1269- ✅ `ring-3` for 3px ring width
1270- ✅ `@utility` for custom utilities
1271- ✅ `@theme` for configuration
1272
1273## Performance Best Practices
1274
1275### Leverage v4's Performance Features
1276- Use automatic content detection (no manual `content` config needed)
1277- Prefer container queries over viewport queries for true component responsiveness
1278- Use CSS variables from `@theme` for dynamic styling
1279- Leverage the new OKLCH color system for better color consistency
1280
1281### Efficient Class Usage
1282```html
1283<!-- Good: Use size-* for square elements -->
1284<div class="size-12"></div>
1285
1286<!-- Instead of: -->
1287<div class="w-12 h-12"></div>
1288
1289<!-- Good: Use container queries for component responsiveness -->
1290<div class="@container">
1291 <div class="p-4 @lg:p-8">Content</div>
1292</div>
1293
1294<!-- Good: Use CSS variables for dynamic values -->
1295<div class="bg-[var(--theme-primary)] text-[var(--theme-on-primary)]">
1296 Dynamic theming
1297</div>
1298```
1299
1300## Framework Integration
1301
1302### Svelte 5
1303```svelte
1304<script>
1305 let { variant = "primary", children } = $props();
1306
1307 const buttonClasses = $derived(() => [
1308 'px-4 py-2 rounded-md font-medium transition-colors',
1309 variant === 'primary'
1310 ? 'bg-brand text-white hover:bg-brand/90'
1311 : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
1312 ].join(' '));
1313</script>
1314
1315<button class={buttonClasses}>
1316 {@render children()}
1317</button>
1318
1319<style>
1320@import "tailwindcss";
1321
1322@theme {
1323 --color-brand: oklch(0.5 0.2 240);
1324}
1325</style>
1326```
1327
1328## Debugging & Development
1329
1330### Browser DevTools Tips
13311. **Inspect CSS Variables**: Check `:root` in DevTools to see all theme variables
13322. **Check Cascade Layers**: Use the Layers panel to understand style precedence
13333. **Verify OKLCH Support**: Test colors in modern browsers vs fallbacks
13344. **Container Query Debugging**: Use the @container panel in DevTools
1335
1336### Common Debug Commands
1337```bash
1338# Check if utilities are being generated
1339npx tailwindcss --watch --content "./src/**/*.{html,js,jsx,ts,tsx}"
1340
1341# Verify v4 installation
1342npm list tailwindcss
1343
1344# Check for conflicting PostCSS plugins
1345npm list | grep postcss
1346```
1347
1348### VS Code Extensions
1349- Tailwind CSS IntelliSense (updated for v4)
1350- PostCSS Language Support
1351
1352## v3 to v4 Migration Checklist
1353
1354### Pre-Migration
1355- [ ] Backup your project
1356- [ ] Ensure Node.js 20+ is installed
1357- [ ] Check browser support requirements (Safari 16.4+, Chrome 111+, Firefox 128+)
1358
1359### Automated Migration
1360```bash
1361npx @tailwindcss/upgrade@next
1362```
1363
1364### Manual Verification
1365- [ ] Replace `@tailwind` directives with `@import "tailwindcss"`
1366- [ ] Move `tailwind.config.js` content to CSS `@theme`
1367- [ ] Update deprecated utility classes
1368- [ ] Test container queries functionality
1369- [ ] Verify custom component styles
1370- [ ] Check 3D transform support
1371- [ ] Test mask utilities if used
1372- [ ] Validate color consistency (OKLCH vs RGB)
1373
1374### Testing
1375- [ ] Test in all target browsers
1376- [ ] Verify responsive design still works
1377- [ ] Check dark mode functionality
1378- [ ] Test custom animations
1379- [ ] Validate accessibility features
1380
1381## Production-Ready Component Patterns
1382
1383### Modern Card Component
1384```html
1385<div class="@container group">
1386 <article class="
1387 bg-white dark:bg-gray-900
1388 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800
1389 overflow-hidden transition-all duration-200
1390 hover:shadow-md hover:-translate-y-0.5
1391 @sm:flex @sm:items-center
1392 ">
1393 <div class="@sm:flex-shrink-0">
1394 <img class="h-48 w-full object-cover @sm:h-full @sm:w-48" src="..." alt="...">
1395 </div>
1396 <div class="p-6 @sm:p-8">
1397 <h3 class="text-lg font-semibold text-gray-900 dark:text-white @lg:text-xl">
1398 Card Title
1399 </h3>
1400 <p class="mt-2 text-gray-600 dark:text-gray-300 @lg:text-lg">
1401 Card description that adapts to container size.
1402 </p>
1403 </div>
1404 </article>
1405</div>
1406```
1407
1408### 3D Interactive Button
1409```html
1410<button class="
1411 relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg
1412 transform-3d perspective-1000
1413 transition-all duration-200
1414 hover:rotate-x-12 hover:scale-105 hover:shadow-xl
1415 active:scale-95 active:rotate-x-6
1416 focus:outline-none focus:ring-2 focus:ring-blue-500/50
1417">
1418 3D Button
1419</button>
1420```
1421
1422Remember: Tailwind CSS v4 is designed for modern browsers and modern development workflows. Embrace the new CSS-first approach and leverage the powerful new features for better performance and developer experience.