ESLint plugin for Tailwind Variants
npm install eslint-plugin-tailwind-variantsESLint 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.
``sh`
npm i -D eslint eslint-plugin-tailwind-variants
1. Depending on your environment you may need to install the following dependencies:
`shTypeScript
npm i -D @typescript-eslint/parser
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) | ✔ | ✔ |