prettier-plugin-tailwindcss

prettier-plugin-tailwindcss is the official Prettier plugin from Tailwind Labs that reorders class/className attribute values into Tailwind’s recommended class order every time Prettier formats a file. It removes the bikeshedding over class ordering by consistently sorting classes based on their position in Tailwind’s internal property order, so visually related utilities end up grouped together.

It works across HTML, JSX, Vue, Svelte, Angular, and plain template literals, and automatically detects and reads your project’s tailwind.config.js/tailwind.config.ts (or Tailwind v4 CSS-based config) so custom utilities and variants are sorted correctly alongside built-in ones.

What You Get

• Automatic sorting of Tailwind classes in class/className attributes on every Prettier format
• Support for HTML, JSX/TSX, Vue, Svelte, Angular templates, and plain JS/TS template literals
• Automatic detection of your project’s Tailwind config (JS/TS config or Tailwind v4 CSS-based config) to sort custom utilities correctly
• A tailwindFunctions/tailwindAttributes option for sorting classes inside custom utility functions (e.g. clsx, cva) or non-standard attributes
• Compatibility layer supporting both Tailwind CSS v3 and v4 sorting rules
• An exported sorter entry point for programmatic access to the sorting logic outside of Prettier

Common Use Cases

• Enforcing a consistent, non-bikeshed Tailwind class order across a team via existing Prettier CI checks
• Auto-sorting classes generated by class-merging utilities like clsx/cva/classnames via the tailwindFunctions option
• Keeping class order consistent across HTML, JSX, and Vue templates in a mixed-framework monorepo
• Migrating a codebase to Tailwind v4 while keeping class ordering behavior compatible with the new engine

Under The Hood

Architecture - The plugin registers as a Prettier astFormat post-processing step: src/index.ts wires up the plugin’s parsers/printers overrides, src/transform.ts walks the AST produced by Prettier’s language parsers to find class-bearing attributes and literals, src/sorting.ts/src/sorter.ts compute the canonical order using Tailwind’s own utility ordering, and src/resolve.ts/src/config.ts locate and load the user’s Tailwind config so custom classes sort correctly; src/versions/ isolates the differences needed to support both Tailwind v3 and v4 config/engine shapes. Tech Stack - Written in TypeScript, distributed as an ESM-only package (type: module, .mjs output) with prettier and tailwindcss as peer dependencies, tested with Vitest (utils.test.ts) and benchmarked with utils.bench.ts, built via a small scripts/ pipeline. Code Quality - The implementation is compact (~3,000 lines across a dozen focused source files) with a dedicated expiring-map.ts cache to avoid re-resolving Tailwind config on every format call, fixture-based tests under tests/fixtures covering each supported template language, and a maintained CHANGELOG; the repo has been actively developed since 2021 with 380+ commits and continuous recent activity. API Design - Installation requires zero configuration beyond adding the plugin to Prettier’s plugins array, and the plugin exposes a small, well-documented options surface (tailwindFunctions, tailwindAttributes, tailwindConfig) plus a standalone sorter export for anyone who wants the sorting logic without running it through Prettier.