Tailwind CSS v4

Slipstream UI ships a CSS-first theme contract for Tailwind v4. It maps every semantic token the components use, so createTheme(), presets and dark mode keep working without a tailwind.config.js.

1. Import the theme

@import "tailwindcss";
@import "@slipstream-ui/themes/tailwind-v4.css";

/* Tell v4 where the component classes live. */
@source "../../node_modules/@slipstream-ui/core/dist";
@source "../../node_modules/@slipstream-ui/ai/dist";

/* Optional: animated overlays */
@plugin "tailwindcss-animate";

2. Apply your theme variables

The v4 file reads the same HSL channel variables that createTheme() emits. Apply them to the root element (or a scoped container):

import { createTheme, themeToCssVariables } from "@slipstream-ui/themes";

const css = themeToCssVariables(createTheme({ brandColor: "224 89% 53%" }));
document.documentElement.setAttribute("style", css);

3. Keep dark mode working

The v4 entry declares @custom-variant dark against the .dark class, matching the v3 preset. Toggle the class on <html> as before.

What changes from v3

• There is no JavaScript theme preset to import; the CSS file replaces it.
• Add @source entries so v4 scans the published component output.
• Animated overlays need tailwindcss-animate via @plugin, or tw-animate-css; without it, overlays still render but lose motion.
• Dynamic class names remain unsupported. Slipstream already uses literal class maps.

Verification

packages/core/src/test/tailwind-v4.test.ts scans every component for semantic colour classes and fails if the v4 file is missing a token. It also checks radius, density, motion and accordion animations. It does not replace a real v4 app build.