An ESLint plugin that enforces best practices and consistency for Tailwind CSS usage.
eslint-plugin-tailwindcss is an ESLint plugin that provides a set of rules to enforce best practices and consistency when using Tailwind CSS. It helps developers avoid common pitfalls like contradictory classnames, unnecessary arbitrary values, and inconsistent ordering, improving code quality and maintainability. The plugin offers more than just class sorting, with rules that validate shorthand usage, custom classnames, and migration paths.
Frontend developers and teams using Tailwind CSS who want to enforce consistent coding standards and catch errors early in their development workflow. It's particularly useful for projects with large codebases or multiple contributors.
Developers choose this plugin because it goes beyond prettier-plugin-tailwindcss by offering additional validation rules that catch logical errors and enforce consistency. Its comprehensive rule set helps maintain clean, error-free Tailwind CSS code while supporting modern ESLint configurations and Tailwind CSS versions.
ESLint plugin for Tailwind CSS usage
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Goes beyond class sorting with rules like no-contradicting-classname and enforces-shorthand, catching logical errors that prettier-plugin-tailwindcss misses, as emphasized in the README.
Supports ESLint v9 and flat configs, with recent updates enabling compatibility, ensuring it works with the latest tooling workflows.
Regularly updated with community contributions, sponsorships, and support for new Tailwind versions like 3.4.0, indicating ongoing development and reliability.
Includes a dedicated rule for upgrading from Tailwind v2 to v3, providing automated warnings to simplify migration efforts.
Tailwind CSS v4 support is only available in a beta version labeled 'as is', with acknowledged errors and false positives, such as issues with the no-contradicting-classname rule.
Requires installing and configuring separate ESLint parsers for different file types (e.g., Vue, TypeScript, HTML), adding significant setup overhead compared to simpler plugins.
Some rules conflict, like migration-from-tailwind-2 requiring temporary disable of no-custom-classname, as noted in the README, which can complicate configuration.