strict-tailwind-order weekly downloads statistics

strict-tailwind-order

A Prettier 3 plugin and CLI that runs the official prettier-plugin-tailwindcss first, then applies strict functional class ordering and family-safe class-line wrapping as the final stage.

The package does not fork, vendor, copy, or reimplement the official plugin.

Requirements

• Node.js >=20.19
• Prettier >=3.7.0 <4.0.0
• prettier-plugin-tailwindcss >=0.8.0 <0.9.0

Install

npm install -D prettier@^3.7.0 prettier-plugin-tailwindcss@0.8.0 strict-tailwind-order

With pnpm:

pnpm add -D prettier@^3.7.0 prettier-plugin-tailwindcss@0.8.0 strict-tailwind-order

Configure

Use one regular Prettier configuration:

const config = {
  semi: true,
  singleQuote: true,
  printWidth: 120,
  plugins: ['prettier-plugin-tailwindcss', 'strict-tailwind-order'],
};

export default config;

Run the strict-tailwind-order CLI rather than raw prettier when both sorters are configured. The CLI creates two isolated configurations internally:

source
→ Prettier + prettier-plugin-tailwindcss
→ Prettier + strict-tailwind-order
→ final output

Other parser and language plugins remain available in both stages. The official plugin is removed from the strict stage and cannot run again after strict sorting or wrapping.

CLI

npx strict-tailwind-order --write .
npx strict-tailwind-order --check .
npx strict-tailwind-order --write src
npx strict-tailwind-order --check src/App.vue
npx strict-tailwind-order --check "src/**/*.{js,ts,jsx,tsx,vue,html,css}"

--write performs both stages in memory and writes only the final output after both stages succeed. --check uses the same pipeline without modifying files.

The CLI uses the consumer project's Prettier configuration, overrides, .prettierignore, parser inference, installed Prettier, and installed official plugin.

Explicit Prettier config

When the Prettier config is outside a standard discovery location, pass it explicitly:

strict-tailwind-order --write . --config config/prettier.config.mjs
strict-tailwind-order --check pages/01/src/App.vue --config config/prettier.config.mjs

The option may appear before or after the inputs:

strict-tailwind-order --config config/prettier.config.mjs --write .
strict-tailwind-order --write . --config config/prettier.config.mjs

--config-path is an alias for --config. Relative paths are resolved from the current working directory; absolute paths are supported. The same resolved config is used by both stages, including filepath-based overrides, additional plugins, Tailwind options, and environment-dependent logic such as process.env.PAGE.

The CLI does not silently treat config/prettier.config.mjs as a special global fallback. Use --config when the file is not discoverable by Prettier. This avoids ambiguous or surprising config selection in generic projects.

Package scripts

Config in a standard location:

{
  "scripts": {
    "format": "strict-tailwind-order --write .",
    "format:check": "strict-tailwind-order --check ."
  }
}

Config in config/prettier.config.mjs:

{
  "scripts": {
    "format": "strict-tailwind-order --write . --config config/prettier.config.mjs",
    "format:check": "strict-tailwind-order --check . --config config/prettier.config.mjs"
  }
}

For multi-page projects, keep the existing command that sets PAGE and replace only the raw prettier executable with strict-tailwind-order, adding --config config/prettier.config.mjs.

CI

- run: npm ci
- run: npm run format:check

Pre-commit

Pass the staged file paths to the local CLI. Do not run the official plugin in a separate command after it.

npx strict-tailwind-order --write src/App.vue src/components/Card.tsx

Official plugin options

The official stage receives the project's official options unchanged, including supported stylesheet, config, attribute, function, duplicate, and whitespace options.

The strict stage maps these options when an equivalent exists:

Official option	Strict option
tailwindStylesheet or tailwindEntryPoint	strictTailwindStylesheet
tailwindAttributes	strictTailwindAttributes
tailwindFunctions	strictTailwindFunctions
tailwindPreserveWhitespace	strictTailwindPreserveWhitespace

tailwindConfig, tailwindPackageName, and tailwindPreserveDuplicates remain official-stage options. The strict stage removes them rather than passing unknown options to Prettier.

Strict options

const config = {
  plugins: ['prettier-plugin-tailwindcss', 'strict-tailwind-order'],
  strictTailwindMaxClassLineLength: 100,
  strictTailwindStylesheet: 'src/main.css',
  strictTailwindAttributes: ['button-class'],
  strictTailwindFunctions: ['cx'],
  strictTailwindPreserveWhitespace: false,
};

export default config;

strictTailwindStylesheet is optional because stylesheet discovery remains enabled by default. Set strictTailwindMaxClassLineLength to 0 to disable class-content wrapping.

Vue regular HTML self-closing compatibility

The combined CLI protects regular lowercase HTML elements that are written as self-closing Vue template elements before the official stage, restores them before the strict stage, and preserves their final structure:

<p class="mb-4 px-2 md:mb-8 md:px-4" />

The compatibility layer does not convert the element to <p></p> or to a fragment. It does not rewrite Vue components, void elements, already-closed regular elements, comments, script strings, style content, directives, or class bindings. Class values remain available to the official stage and are then sorted and wrapped by strict as the final operation.…