Familiar utilities. Enforced rules.

Website · Documentation · Playground · Coding agents

---

Stillwind is a compiler for component styles. Write Tailwind CSS v4 utilities, enforce your design system, and ship static CSS. Its checks keep styling code in order, even when AI agents write much of it.

Warning

Stillwind is in early development. Test your application's build and pages before you release changes.

/* src/stillwind.css */
@import "stillwind";

@theme {
  --color-accent: oklch(0.6 0.2 250);
}

import { style } from "stillwind/react";

<button {...style("rounded-md bg-accent px-4 py-2 text-white", loading && "opacity-60")}>
  Save
</button>;

style() returns props, such as className, for the element. The compiler generates static CSS for the utilities, and the CLI reports a utility that the theme does not define, such as a misspelled bg-acent. Try it in the Playground.

Why Stillwind

• Design systems: require colors, spacing, and breakpoints to come from your theme.
• Element relationships: check that styles depending on a parent or sibling element actually refer to that element.
• Animations and view transitions: define them inside the component that uses them, without adding global names.

Why Stillwind explains these checks in detail.

Get started

Install the packages:

vp i stillwind
vp i -D @stillwind/integration @stillwind/cli

Then follow Getting started to add a stylesheet, configure the project, and register the build integration.

To see diagnostics and completion while you edit, install the VS Code extension from the Visual Studio Marketplace or Open VSX.

To let a coding agent do the setup, give it this prompt:

Set up Stillwind in this project. If the stillwind package is not installed,
install it with the project's package manager. Then read
node_modules/stillwind/docs/agents.md and follow its instructions for agents.

The agent sets up a new project or migrates an existing one. Before it migrates existing styles, it asks how far to go. See Coding agents.

Frameworks and build tools

Stillwind supports Alpine, Astro, Lit, Preact, Qwik, React, Solid, Svelte, Vue, and vanilla JavaScript. Its build integration supports Vite, Astro, Next.js, Nuxt, SvelteKit, Fresh, webpack, Rspack, Rsbuild, and Turbopack. See Framework integrations.

Stillwind accepts Tailwind CSS v4 utilities, theme variables, CSS directives, and plugins. See Tailwind CSS compatibility. To move an existing project, see Migrating from Tailwind CSS or Migrating from CSS.

Packages

Package	Use
stillwind	Styles, themes, configuration helpers, and framework APIs
@stillwind/integration	Build integrations
@stillwind/cli	Sorting, linting, automatic fixes, and CI checks
prettier-plugin-stillwind	Utility sorting during Prettier formatting
VS Code extension	Diagnostics, completion, CSS previews, colors, and sorting
@stillwind/plugin-iconify	Iconify icons as utilities

Contributing

Development describes the repository setup, architecture, and verification. PHILOSOPHY.md records the design principles.

License

Stillwind is released under the MIT License. See THIRD_PARTY_NOTICES.md for the licenses of included third-party code.