@select/tailwind-preset

Tailwind v4 preset for the Select design system. Maps @select/tokens semantic CSS variables to Tailwind utility-class generators via @theme inline, with shadcn-canonical name aliases so shadcn primitives work without modification.

This package is CSS-only — no JavaScript, no build step. The single preset.css file ships verbatim and gets imported by consumer CSS.

Install

Workspace-internal during Phase 1 — consumed via file: dependency:

{
  "dependencies": {
    "@select/tokens": "file:../select-design-system/packages/tokens",
    "@select/tailwind-preset": "file:../select-design-system/packages/tailwind-preset"
  }
}

Usage

In your application's main CSS:

@import 'tailwindcss';
@import '@select/tokens/css';
@import '@select/tailwind-preset';

After this, Tailwind v4 generates utility classes for every token in the design system:

<!-- Design system semantic names -->
<div class="bg-surface text-text-primary p-4 rounded-lg shadow-1">
  <button class="bg-action-primary text-action-primary-fg px-4 py-2 rounded-md">
    Primary action
  </button>
</div>

<!-- shadcn-canonical names (aliased to the design system semantics) -->
<div class="bg-background text-foreground p-4 rounded-lg shadow-md">
  <button class="bg-primary text-primary-foreground px-4 py-2 rounded">
    Primary action
  </button>
</div>

Both class sets resolve to the same underlying CSS variables. The shadcn aliases exist so shadcn primitives — consumed via @select/ui in Phase 2 — work without modification.

What gets aliased

| shadcn / Tailwind name | Design system semantic | |---|---| | --color-background | --color-surface | | --color-foreground | --color-text-primary | | --color-card, --color-popover | --color-surface-raised | | --color-card-foreground, --color-popover-foreground | --color-text-primary | | --color-primary | --color-action-primary | | --color-primary-foreground | --color-action-primary-fg | | --color-secondary | --color-action-secondary | | --color-secondary-foreground | --color-action-secondary-fg | | --color-muted | --color-surface-sunken | | --color-muted-foreground | --color-text-muted | | --color-accent | --color-action-secondary | | --color-accent-foreground | --color-action-secondary-fg | | --color-destructive | --color-feedback-danger | | --color-destructive-foreground | --color-feedback-danger-fg | | --color-input | --color-border | | --font-sans | --font-body (Inter) | | --font-serif | --font-display (Poppins) | | --radius | --radius-lg (the 10px anchor) |

The design system semantic names are authoritative. Aliases exist for compatibility with shadcn's component conventions.

What's NOT in the preset

• --color-chart-* and --color-sidebar-* shadcn defaults are not aliased. They're component scope creep; if/when components need them, we add them in @select/ui.
• Icon sizing tokens (--icon-*) are not exposed as Tailwind utilities. Consumers reference them via CSS or component props.
• --color-brand-ink and --color-overlay-scrim are not exposed as utilities (they're used in shadows and overlays, not as bg-* or text-*).

Theming and overrides

The inline keyword on @theme means Tailwind emits utilities as var(--…) references rather than inlining resolved values. Consumers can override any semantic CSS variable at any DOM scope to retheme without rebuilding:

<div style="--color-action-primary: oklch(0.6 0.2 30);">
  <button class="bg-action-primary">Now orange</button>
</div>

See docs/patterns/community-theming.md (shipping in Plan 0010) for the full theming contract.

Why no JS / build step

This package is intentionally CSS-only. Tailwind v4's @theme inline directive consumes CSS variables directly — there's nothing for a build step to do. Shipping the file verbatim avoids a dependency on tsup/esbuild and makes the package's behavior transparent.

See also

• @select/tokens — the underlying token declarations.
• @select/palette — runtime palette derivation for community theming.
• @select/ui (Phase 2) — shadcn primitives customized for Select.
• ADRs 0001-shadcn-as-core, 0009-two-tier-token-model, 0014-select-ui-as-published-package in the workspace decisions/ folder.