Loop

Tailwind Design System · Loop · Loop

--color-accent: oklch(0.65 0.25 29);
--color-accent-hover: oklch(0.60 0.25 29);
--color-accent-subtle: oklch(0.65 0.15 29 / 0.15);

@theme {
  /* Color — semantic palette in OKLCH */
  --color-surface: oklch(0.985 0.005 260);
  --color-surface-elevated: oklch(1 0 0);
  --color-surface-sunken: oklch(0.96 0.005 260);
  --color-accent: oklch(0.65 0.25 29);
  --color-accent-hover: oklch(0.58 0.25 29);
  --color-accent-subtle: oklch(0.65 0.15 29 / 0.12);
  --color-text-primary: oklch(0.13 0.01 260);
  --color-text-secondary: oklch(0.45 0.01 260);
  --color-text-tertiary: oklch(0.62 0.01 260);
  --color-border: oklch(0.88 0.005 260);
  --color-border-strong: oklch(0.78 0.005 260);

  /* Spacing — 4px base */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Radii */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-card: 1rem;
  --radius-lg: 1.25rem;
  --radius-pill: 9999px;

  /* Shadow — layered depth */
  --shadow-subtle: 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-elevated: 0 4px 12px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.04);
  --shadow-overlay: 0 12px 40px oklch(0 0 0 / 0.12), 0 4px 12px oklch(0 0 0 / 0.06);

  /* Type — font families */
  --font-display: "Instrument Serif", serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Type scale — fluid with clamp */
  --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.2rem, 1.6rem + 2vw, 3.25rem);
  --text-5xl: clamp(2.8rem, 2rem + 2.5vw, 4rem);
  --text-6xl: clamp(3.5rem, 2.5rem + 3vw, 5rem);

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* Blur */
  --blur-subtle: 4px;
  --blur-medium: 12px;
  --blur-overlay: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: oklch(0.14 0.005 260);
    --color-surface-elevated: oklch(0.18 0.005 260);
    --color-surface-sunken: oklch(0.10 0.005 260);
    --color-text-primary: oklch(0.93 0.005 260);
    --color-text-secondary: oklch(0.68 0.005 260);
    --color-text-tertiary: oklch(0.52 0.005 260);
    --color-border: oklch(0.25 0.005 260);
    --color-border-strong: oklch(0.35 0.005 260);
    --shadow-subtle: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-elevated: 0 4px 12px oklch(0 0 0 / 0.3), 0 1px 3px oklch(0 0 0 / 0.2);
  }
}

<div className="bg-surface rounded-card p-space-lg shadow-elevated">
  <h2 className="font-display text-text-primary text-2xl text-balance">
    Heading
  </h2>
  <p className="mt-space-sm text-text-secondary text-base">
    Body text using token-based spacing and color.
  </p>
</div>

<button className="bg-accent text-surface rounded-sm px-space-md py-space-sm text-sm font-sans transition-colors duration-fast hover:bg-accent-hover">
  Call to action
</button>

<div className="rounded-card bg-surface-elevated p-space-md shadow-elevated">
  <img className="rounded-sm w-full aspect-video object-cover" src="/hero.jpg" alt="" />
  <div className="mt-space-sm">
    <h3 className="font-sans text-lg font-semibold text-text-primary">Card title</h3>
    <p className="mt-space-xs text-sm text-text-secondary">Card description</p>
  </div>
</div>

<div className="font-mono tabular-nums text-4xl text-accent">
  $12,450.00
</div>

Activity

ActiveDaily · 9:00 AM4 sources

Automation & run history

Automation status and run history. Only the owner can trigger runs or edit the schedule.

View automation desk

Next run< 1h

ScheduleDaily · 9:00 AM

Runs this month30

Latest outcomev7

April 2026

Tailwind Design System refresh

Daily · 9:00 AM30 runs< 1h

Automation brief

Check Tailwind CSS and plugin releases for @theme API changes, new utility classes, or config schema updates. Scan the CSS WG drafts for spec changes that affect token transport. Update design-token patterns and migration notes.

Latest refresh trace

Reasoning steps, source results, and the diff that landed.

Apr 11, 2026 · 9:28 AM

triggerAutomation

editoropenai/gpt-5-mini

duration132.0s

statussuccess

web searches3

Revision: v7

Update: verified Tailwind v4.1 features (text-shadow, masks, pointer utilities) and Design Tokens TR 2025.10 status; clarified `@theme` utility generation guidance and preserved upgrade/tooling cautions.

Updated feature mapping for Tailwind v4.1; reinforced `@theme` usage and utility generation; referenced Design Tokens TR (2025.10) as stable; added integration notes for Tailwind Plus Elements.

Agent steps

Step 1Started scanning 7 sources.

Step 2Tailwind CSS Blog: 12 fresh signals captured.

Step 3Tailwind Releases: No fresh signals found.

Step 4Chrome Developer Blog: 10 fresh signals captured.

Step 5CSS Drafts: No fresh signals found.

Step 6Tailwind Docs: 12 fresh signals captured.

Step 7Design Tokens Spec: 12 fresh signals captured.

Step 8Design Tokens TR: 12 fresh signals captured.

Step 9Agent is rewriting the skill body from the fetched source deltas.

Step 10Agent used 3 web search(es).

Step 11v7 is live with body edits.

Sources

Tailwind CSS Blogdone

12 fresh signals captured.

Blog Vanilla JavaScript support for Tailwind Plus Compass: A starter kit for online courses

Tailwind Releasesdone

No fresh signals found.

Chrome Developer Blogdone

10 fresh signals captured.

Chrome 148 beta Chrome Web Store: A smarter, faster appeals process New in Chrome 147

CSS Draftsdone

No fresh signals found.

Tailwind Docsdone

12 fresh signals captured.

Docs Installation Editor setup

Design Tokens Specdone

12 fresh signals captured.

https://www.designtokens.org/TR/2025.10/format/Daniel Banks Draft Community Group Report

Design Tokens TRdone

12 fresh signals captured.

https://www.designtokens.org/TR/2025.10/format/https://www.designtokens.org/TR/2025.10/format/Daniel Banks

Diff preview

## When NOT to use

−- Projects locked to Tailwind CSS v3 without upgrade path — `@theme` is v4 only; follow the upgrade guide instead

- Projects locked to Tailwind CSS v3 without upgrade path — `@theme` is v4 only; follow the official upgrade guide instead

- Quick prototypes where speed matters more than consistency — use default Tailwind utilities

−- Extremely old-browser targets (see v4 browser requirements below)

+- Extremely old-browser targets (see compatibility notes below)

- Design work in Figma without a code component — define tokens in Figma variables first, then mirror here

## Key platform notes (short)

- Tailwind v4 requires a modern-browser baseline. v4.1 (released April 3, 2025) improved graceful degradation for older browsers while still using modern features where available (Tailwind v4.1 blog).

- The v4 upgrade tool (`npx @tailwindcss/upgrade`) is the supported migration helper for v3→v4; verify Node and environment requirements in the official upgrade guide before running it in CI.

−

- Tailwind v4 requires modern browsers. Official guidance for v4's engine targets modern browsers; v4.1 improves graceful degradation for older browsers (see v4.1 notes). If your project must support older browsers, remain on v3.4 until you can upgrade.

- Tailwind v4 favors CSS-first configuration and `@theme`-driven tokens; see the Theme Variables docs for details on how `@theme` influences generated utilities.

−- The v4 upgrade tool requires Node.js 20+. Run `npx @tailwindcss/upgrade` in a feature branch and review changes.

−- Tailwind v4 favors CSS-first configuration and `@theme`-driven tokens (docs: https://tailwindcss.com/docs/theme).

## Core concepts

@@ −38 +38 @@

- Motion — `--duration-`, `--ease-`

- Z-index — `--z-`

- Blur — `--blur-`

−

- Mask / Clip / Text-Shadow — `--mask-`, `--text-shadow-` (v4.1 adds utilities; expose tokens when you need consistent styles)

- Mask / Clip / Text-Shadow — `--mask-`, `--text-shadow-` (Tailwind v4.1 added utilities; expose tokens when you need consistent styles)

### Concentric radii rule

@@ −60 +60 @@

### 1. Define the complete `@theme` block

−

Use `@theme` at top-level CSS to declare every token that should produce utility classes. Tailwind uses the `@theme` block to both expose CSS variables and generate class names (see docs).

Use `@theme` at top-level CSS to declare every token that should produce utility classes. Tailwind uses the `@theme` block to both expose CSS variables and generate class names (see the Theme Variables docs).

Example `@theme` (semantic tokens):

Su	Mo	Tu	We	Th	Fr	Sa

Tailwind Design System

Content

Tailwind Design System

When to use

When NOT to use

Core concepts

Token categories

Tailwind Design System

Content

Tailwind Design System

When to use

When NOT to use

Core concepts

Token categories

Concentric radii rule

OKLCH color authoring

Workflow

1. Define the complete @theme block

2. Add dark mode tokens

3. Use tokens as Tailwind utilities in components

4. Component-level token usage

Examples

Example 1 — Card with concentric radii

Example 2 — Metric display with tabular-nums

Decision tree

Edge cases and gotchas

Evaluation criteria

Research-backed changes

Fresh signals

Next edits

Activity

Automation & run history

Latest refresh trace

Research engine

Sources