An ESLint plugin for Tailwind CSS v3.0+ that enforces best practices and consistency with focus on ReactJS (.jsx & .tsx).

📩 Installation

To get started, just install eslint-plugin-tailwindcss-jsx as a dev-dependency:

npm install -D eslint eslint-plugin-tailwindcss-jsx

It is also possible to install ESLint globally rather than locally (using npm install -g eslint). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

⚙️ Configuration

.eslintrc.[js/json]

Use our preset to get reasonable defaults:

// ..
  "extends": [
    "eslint:recommended",
    "plugin:tailwindcss-jsx/recommended"
  ]
// ..

You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)

{
  "settings": {
    "tailwindConfigPath": "tailwind.config.js", // Relative path to the TailwindCSS config file from the root directory
    "attributesRegex": /\b(class|className)\b/g.source, // Regex to match Attribute Nodes that contain TailwindCSS class names
    "calleesRegex": /\b(clsx|cls|classnames)\b/g.source, // Regex to match Call Expression Nodes that contain TailwindCSS class names
    "tagsRegex": /\b(tss)\b/g.source, // Regex to match Tag Expression Nodes that contain TailwindCSS class names
  }
}

If you do not use a preset you will need to specify individual rules and add extra configuration.

Add tailwindcss-jsx to the plugins section:

// ..
  "plugins": [
    "tailwindcss-jsx",
  ]
// ..

Enable JSX support

// ..
"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
  }
}
// ..

Enable the rules that you would like to use:

// ..
  "plugins": [
    "tailwindcss-jsx/sort-classes": "error",
  ]
// ..

Sharable configs

Recommended

This plugin exports a recommended configuration that enforces TailwindCSS best practices. To enable this configuration use the extends property in your .eslintrc config file:

// ..
"extends": ["eslint:recommended", "plugin:tailwindcss-jsx/recommended"]
// ..

See eslint documentation for more information about extending configuration files.

Note: These configurations will enable JSX in parser options.

eslint.config.js

coming soon

📜 List of supported rules

• ☑️ Set in the recommended configuration
• 🔧 Automatically fixable by the --fix CLI option

| Name                                 | Description | ☑️ | 🔧 | | :---------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :- | :- | | sort-classes | Enforces consistent order of TailwindCSS class names based on the officially recommended class name order. | ☑️ | 🔧 | | extract-classes | Enforces the extraction of TailwindCSS class names if an identifier like extract-[Container] is present. | | 🔧 |

🆔 License

eslint-plugin-tailwindcss-jsx is licensed under the MIT License.

🙏 Contribution

📒 Resources

• ESLint Custom Rules Docs
• Custom ESLint Rule with Typescript Blog
• How to write custom ESLint RuleBlog
• AST Explorer

🔴 Debug via Jest Test

• StackOverflow

1. Start Javascript Debug Terminal
2. Set 🔴 Debug Point
3. Run test via pnpm run test --watch, for example:

   pnpm run test -- extract-tailwind --watch

🌟 Credits

• prettier-plugin-tailwindcss - Inspiration in terms of official sorting
• eslint-plugin-react - Inspiration in terms of documentation
• eslint-plugin-tailwindcss - Inspiration in terms of integration tests