Sharing Theme Across Projects

Share a design system across applications by importing a common CSS theme file, the v4 replacement for JavaScript presets.

4 min read Level 2/5 #tailwind#presets#theming

What you'll learn

Extract @theme into a shared CSS file
Import the shared theme in each application
Override per-project tokens after the import

In v3 you shared configuration with the JS presets array. In v4 a preset is just a CSS file with a @theme block that every app imports.

The Shared Theme File

Put the common tokens in one file, owned by the design system:

/* shared/theme.css */
@theme {
  --color-brand: oklch(0.62 0.19 256);
  --color-accent: oklch(0.74 0.16 70);
  --font-display: "Satoshi", sans-serif;
  --radius-card: 1rem;
}

Importing It Per App

Each application imports Tailwind and then the shared theme:

/* app/styles.css */
@import "tailwindcss";
@import "../shared/theme.css";

Every app now gets identical bg-brand, font-display, and rounded-card utilities from a single source.

Per-Project Overrides

An app can specialize after the import — later @theme declarations win:

@import "tailwindcss";
@import "../shared/theme.css";

@theme {
  /* This product runs a warmer brand */
  --color-brand: oklch(0.6 0.2 35);
}

The shared tokens stay the default; the override only changes what this app needs.

Publishing for an Organization

For company-wide systems, publish the theme file as an npm package and import it by name:

@import "tailwindcss";
@import "@acme/design-system/theme.css";

Versioning the package lets teams adopt design updates deliberately — the same workflow as a shared component library, but for tokens.

@layer & Specificity →