...
...
...
...
...
...
...
...
...
```
### Pattern 3: Inspecting a token at runtime
| v3.4 (JavaScript) | v4.0+ (CSS variables) |
|-------------------|------------------------|
| ```js
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'
const fullConfig = resolveConfig(tailwindConfig)
const red500 = fullConfig.theme.colors.red[500]
// => 'rgb(239 68 68)'
``` | ```js
// resolveConfig is REMOVED in v4 ; tokens are CSS variables.
const styles = getComputedStyle(document.documentElement)
const red500 = styles.getPropertyValue('--color-red-500').trim()
// => 'oklch(0.637 0.237 25.331)'
``` |
In v4, this is the **only** runtime API for token lookup. The build no longer emits a JS-importable config object.
### Pattern 4: oklch P3 wide-gamut colors (v4-only)
v4 defines every default color in the `oklch()` color space, which targets the **P3 wide-gamut** display profile. On standard sRGB monitors, oklch values fall back to the nearest sRGB equivalent ; on P3 monitors (most modern phones, MacBooks since 2016, most external monitors since 2020), the colors render with measurably higher saturation, especially in the orange/red/violet/cyan ranges.
Why this matters for skills authoring custom colors:
```css
@theme {
/* GOOD : oklch produces consistent perceptual lightness across hues */
--color-brand-500: oklch(0.65 0.196 254);
--color-brand-600: oklch(0.55 0.196 254); /* perceptually one step darker */
/* TOLERATED : hex / rgb still parse fine in @theme, but lose P3 reach */
--color-legacy: #3b82f6;
/* TOLERATED : hsl maps cleanly but is not perceptually uniform */
--color-alt: hsl(217 91% 60%);
}
```
ALWAYS prefer `oklch()` in v4 ; the entire default palette uses it, and mixing formats produces inconsistent perceived contrast.
### Pattern 5: Reset, override, or extend
| Goal | v3.4 | v4.0+ |
|------|------|-------|
| Add to defaults | `theme.extend.{namespace}` | `@theme { --{namespace}-newkey: ... }` |
| Replace entire namespace | `theme.{namespace}` (no `.extend`) | `@theme { --{namespace}-*: initial; --{namespace}-key1: ... }` |
| Wipe ALL defaults | Replace all `theme.*` keys manually | `@theme { --*: initial; --spacing: 0.25rem; ... }` |
| Reference another variable | Compute in JS | `@theme inline { --color-brand: var(--my-brand); }` |
The `@theme inline` modifier in v4 is the escape hatch for runtime-resolved tokens (e.g. swapping a CSS variable from JS or a `[data-theme]` attribute).
### Pattern 6: Type scale with line-height pairing
Default v4 line-heights are paired to font sizes (matching v3 `theme.fontSize` tuples). This means `text-base` automatically applies `line-height: 1.5` and `text-2xl` automatically applies `line-height: 2 / 1.5`.
```html
Body copy gets the right leading automatically.
Headline tightened from default.
Custom size with custom leading.
```
In v4 the paired leading is set via the companion variable `--text-{name}--line-height` (see Pattern 1).
### Pattern 7: Token-driven dark mode
The design system carries through to dark mode by **changing the variable values**, not by rewriting utilities. The recommended pattern in v4 :
```css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-background: oklch(1 0 0);
--color-foreground: oklch(0.15 0.02 270);
}
@layer base {
.dark {
--color-background: oklch(0.18 0.02 270);
--color-foreground: oklch(0.95 0.01 270);
}
}
```
Now `bg-background` and `text-foreground` work in both modes without `dark:` variants on every element.
## Reference Links
- `references/methods.md` : complete token namespace reference (every `--*-*` and its `theme.*` equivalent), full default scales for spacing / color / type / breakpoints.
- `references/examples.md` : working code examples for v3 and v4 across spacing, colors, type, breakpoints, opacity, theme overrides.
- `references/anti-patterns.md` : real anti-patterns mined from GitHub issues and the upgrade guide (dynamic class strings, oklch vs rgb mismatch, theme() dot-notation in v4, wrong arbitrary syntax).
## Verified Sources
All content verified against the following SOURCES.md-approved URLs :
- https://tailwindcss.com/docs/colors (v4 color palette + oklch format + opacity modifier)
- https://tailwindcss.com/docs/theme (v4 theme variable namespaces and `@theme` syntax)
- https://tailwindcss.com/docs/padding (v4 spacing scale + dynamic integer utilities)
- https://v3.tailwindcss.com/docs/customizing-colors (v3 color palette + tailwind.config.js theme.colors format)
- https://v3.tailwindcss.com/docs/configuration (v3 theme object structure)
- https://tailwindcss.com/docs/upgrade-guide (v3 to v4 breaking changes including theme function + resolveConfig removal)
- https://tailwindcss.com/blog/tailwindcss-v4 (oklch + P3 wide-gamut introduction)
Last verified : 2026-05-19 (Tailwind CSS v4.x current).