Formatters

Stillwind sorts utilities, and a document formatter controls layout and whitespace. How you combine them depends on the formatter:

All of them read the sort field of stillwind.config.ts and use the same order. Sorting runs whatever the severity of prefer-sorted-utilities is. To stop all sorting, set sort: false.

Create stillwind.config.ts with Getting started first.

Prettier

prettier-plugin-stillwind sorts Stillwind inputs before Prettier formats a document. Install it with Prettier 3.7 or a newer 3.x version:

vp i -D prettier prettier-plugin-stillwind

npm install -D prettier prettier-plugin-stillwind

pnpm add -D prettier prettier-plugin-stillwind

yarn add -D prettier prettier-plugin-stillwind

bun add --dev prettier prettier-plugin-stillwind

export default {
  plugins: ["prettier-plugin-stillwind"],
};

JavaScript, JSX, TypeScript, TSX, CSS, and Vue work without other plugins. For Svelte and Astro, install their Prettier plugins, and load them before the Stillwind plugin:

export default {
  plugins: ["prettier-plugin-svelte", "prettier-plugin-astro", "prettier-plugin-stillwind"],
};

Configuration

The plugin uses the nearest stillwind.config.* above each file. The stillwindConfig Prettier option selects another configuration, with a path relative to the working directory. The plugin reloads the configuration for each formatting request.

A file with no configuration, or outside the files of its project, keeps ordinary Prettier formatting. An invalid explicit configuration fails the formatting request, and so does incomplete or conflicting analysis.

What the plugin changes

The plugin only sorts. To replace utilities with their canonical spellings, run stillwind lint --fix.

• prettier-ignore protects the following syntax node from sorting.
• Range formatting protects the source outside the range.
• Suppression comments control lint findings and fixes, and they do not stop sorting.
• Sorting keeps the spelling of each token.

Other formatters

Run stillwind fmt first. It sorts utilities and keeps the source layout, and the formatter then controls whitespace:

vp exec stillwind fmt
vp exec oxfmt

npx stillwind fmt
npx oxfmt

pnpm exec stillwind fmt
pnpm exec oxfmt

yarn stillwind fmt
yarn oxfmt

bunx stillwind fmt
bunx oxfmt

In CI, check both without saving files:

vp exec stillwind fmt --check
vp exec oxfmt --check

npx stillwind fmt --check
npx oxfmt --check

pnpm exec stillwind fmt --check
pnpm exec oxfmt --check

yarn stillwind fmt --check
yarn oxfmt --check

bunx stillwind fmt --check
bunx oxfmt --check

See the CLI reference for the options of fmt.