@plugin "name";
@plugin "name" {
option: value;
}@plugin loads JavaScript that generates CSS definitions, and the generated CSS
replaces the statement. Write it at the top level of the stylesheet.
Example
@import "stillwind";
@plugin "@stillwind/plugin-iconify";@stillwind/plugin-iconify adds icon utilities such as
icon-mdi--close. Only the icons that your modules use reach the stylesheet.
Finding the plugin
The host looks up name in the plugins field of the project in
stillwind.config.ts first. Otherwise, it imports the package or the local file
from the stylesheet and uses its default export. See
Configuration.
Options
The block contains only name: value; declarations. Strings keep their quotes,
so a ; inside a string does not end a declaration. The loader rejects other
statements and empty values.
Tailwind CSS plugins
Tailwind CSS v4 JavaScript plugins use the same statement, including plugins
that plugin.withOptions() creates. The host supports addBase,
addUtilities, addComponents, matchUtilities, matchComponents,
addVariant, matchVariant, theme, config, and prefix. prefix returns
the class name unchanged, because Stillwind has no class prefix. These plugins need
the tailwindcss package.
The options block converts values as Tailwind does. true, false, null, and
numeric text become those values. A quoted string loses its quotes, other text stays
a string, and a comma-separated list becomes an array.
Definitions from a plugin register before the definitions of your stylesheet,
wherever the @plugin statement stands. A @utility in your stylesheet
therefore adds to a plugin utility with the same name, and
@stillwind-undef-utility can remove
plugin utilities.
A plugin can select elements by fixed class names, such as not-prose. style()
keeps these class names, as
Tailwind CSS compatibility
describes. That page also lists the tested plugins.
A CSS package does not use @plugin. Load it with @import, such as
@import "tw-animate-css";.
invalid-css-import reports a plugin that the host cannot find or load, and invalid options. The stylesheet loads without that plugin.