Eslint Plugin Tailwindcss

Theme by Francoismassart

|

Updated: 17 Jan 2025

|

1864 Stars

ESLint plugin for Tailwind CSS usage

Categories

Overview:

eslint-plugin-tailwindcss is a tool that enforces best practices and consistency in using Tailwind CSS. It goes beyond the official plugin prettier-plugin-tailwindcss by offering more than 5 additional rules to benefit from.

Features:

• classnames-order: Orders classnames for consistency, making merge conflicts easier to resolve.
• enforces-negative-arbitrary-values: Ensures proper use of negative arbitrary values in classnames.
• enforces-shorthand: Merges multiple classnames into shorthand when possible.
• migration-from-tailwind-2: Facilitates an easy upgrade from Tailwind CSS v2 to v3.
• no-arbitrary-value: Forbids the use of arbitrary values in classnames.
• no-custom-classname: Allows only classnames from Tailwind CSS and values from the whitelist option.
• no-contradicting-classname: Prevents the use of contradicting Tailwind CSS classnames.
• no-unnecessary-arbitrary-value: Optimizes classnames by replacing unnecessary arbitrary values.

Installation:

To install eslint-plugin-tailwindcss, you can add it as a dev dependency in your project using npm:

npm install eslint-plugin-tailwindcss --save-dev

Then configure it in your ESLint configuration file, such as .eslintrc:

{
  "plugins": ["tailwindcss"],
  "rules": {
    "tailwindcss/classnames-order": "warn",
    "tailwindcss/enforces-negative-arbitrary-values": "error",
    // Add other rules as needed
  }
}

Summary:

eslint-plugin-tailwindcss is a valuable tool for enforcing best practices and consistency when working with Tailwind CSS. With its various rules, it helps developers maintain a clean and standardized codebase, making it easier to collaborate on projects and ensure code quality. By following the installation guide and leveraging its features, developers can enhance their development workflow and improve the overall quality of their Tailwind CSS projects.