prettier-plugin-tailwindcss is a Prettier plugin that automatically sorts Tailwind CSS classes according to the framework's recommended class order.
The plugin solves the problem of inconsistent class ordering in Tailwind CSS projects by integrating directly into the Prettier code formatting workflow. When you format code, the plugin parses class strings and rearranges them into a standardized order that aligns with Tailwind's conventions. This removes the cognitive load of manually organizing classes and ensures consistency across a codebase without requiring developers to learn or remember the sorting rules.
The tool works with Tailwind CSS v3.0 and later alongside Prettier v3 and above. It sorts classes in standard HTML class attributes, framework-specific equivalents like className and ngClass, and Tailwind @apply directives. For projects with custom Tailwind configurations, the plugin can read your tailwind.config.js file to ensure sorting respects your customizations. The plugin also supports sorting classes in function calls like clsx() and cva(), and in tagged template literals, making it useful when working with utility libraries. You can extend sorting to custom attributes using the tailwindAttributes option, including regex patterns to match multiple attributes at once.
Adoption requires Prettier v3 and ESM-compatible tooling, as the plugin is ESM-only and cannot be loaded via require(). For Tailwind CSS v4 users, you must specify your CSS file entry point using the tailwindStylesheet option. The plugin is most valuable for teams already using Prettier who want to eliminate class ordering decisions from code review and maintain a consistent visual hierarchy in their markup. It requires minimal configuration for standard setups but offers flexibility through options for non-standard attributes and function calls.
The project maintains active engagement with issues and pull requests, addressing user questions and bug reports. Development includes regular updates to support new Tailwind and Prettier versions. The codebase is written in TypeScript, providing type safety for contributors and users who import types for editor support.
