Tailwind CSS compatibility

Stillwind supports the utilities, variants, theme, CSS directives, and plugins of Tailwind CSS v4. To move a project, follow Migrating from Tailwind CSS. This page lists what works, how Stillwind checks it, and where Stillwind differs.

What works

How Stillwind checks compatibility

The test suite compares Stillwind with the Tailwind compiler. It runs both compilers on the same input and fails when their results differ:

• For utilities and variants, it compares the generated CSS for each class in Tailwind’s public class list and in its variant list.
• For plugins and CSS packages, it builds the same stylesheet with both compilers and compares the computed styles in Chrome.

The declarations inside a rule can stand in a different order from Tailwind’s, as CSS ordering describes. The order of two declarations that can affect each other stays the same, so the computed styles do not change.

Plugins and CSS packages

Tailwind CSS v4 plugins work in Stillwind in principle. The test suite runs the following packages in Vite development and production builds and in Rspack production builds. It also compares their output with Tailwind.

Load these packages with @plugin:

For Iconify icons, Stillwind also provides the @stillwind/plugin-iconify plugin.

Load these packages with @import:

Other plugins can use the same features. @plugin lists the supported plugin API. JavaScript plugins need the tailwindcss package, and CSS packages do not.

The tests cover CSS. They do not run the JavaScript of a package, such as the components of Preline. Plugins have no browser test with webpack or Next.js. Test these combinations in your application.

Class names that a plugin’s selectors use

A plugin can select an element by a fixed class name. For example, the rules of prose skip elements inside not-prose. style() keeps such a class in the class attribute, so style("not-prose") adds the class not-prose. The class keeps its name only without variants, so invalid-marker-use reports hover:not-prose.

What Stillwind does not support

These differences come from the design of Stillwind. No setting changes them.

Classes outside style()

Only style() calls generate utilities. Stillwind does not scan files, so these features have no replacement:

• @source, @source inline(), and source(...) on @import
• A safelist of class names
• Tailwind classes inside a dependency
• Utility classes that JavaScript adds at runtime, such as `bg-${color}-600`

Write each utility that you need in a style() call in your own code. For HTML that you do not control, see Avoid separate CSS.

The tw: class prefix

Stillwind generates unique class names, so utilities do not need a prefix. Write p-4 instead of tw:p-4. Theme variables can still collide with other CSS in the page. To prefix them, set themePrefix on the project, as Migrating from Tailwind CSS describes. In a plugin, prefix() returns the class name unchanged.

Other differences

ignored-tailwind-feature reports the features in your stylesheet that have no effect.