eslint-plugin-tailwind-variants

ESLint plugin to enforce best practices and consistent naming conventions for tailwind-variants.

Automatically enforces proper variable naming, limits excessive inline classes, and promotes clean tv() usage with auto-fix support. This plugin supports a wide range of projects, including React, Vue, plain JavaScript or TypeScript.

Installation

``sh
npm i -D eslint eslint-plugin-tailwind-variants
`

Quick start

1. Depending on your environment you may need to install the following dependencies:

`sh


TypeScript

2. Enable the recommended config in your ESLint config:

`js
// eslint.config.{js|ts)

// ...
import tailwindVariants from "eslint-plugin-tailwind-variants";

export default defineConfig([
...tailwindVariants.configs.recommended,
]);
`

$3

If you are using the ESLint plugin in VS Code add the following to your settings.json to enable css linting:

`json
{
"eslint.validate": ["css"]
}
`

$3

| Name | Description | recommended | autofix |
| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------- |
| require-variants-call-styles-name | enforce that when calling a function returned by tailwind-variants (tv()), the result is assigned to a variable named styles` (or a configurable name) | ✔ | ✔ |
| require-variants-suffix | require variables assigned from tv() to end with a specific suffix | ✔ | ✔ |
| limited-inline-classes | enforce limited number of inline class names and prohibit cn() usage | ✔ | |
| sort-custom-properties | enforce consistent ordering of CSS custom properties (CSS variables) | ✔ | ✔ |