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

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

Quick start

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

# TypeScript
npm i -D @typescript-eslint/parser

# Vue
npm i -D vue-eslint-parser

2. Enable the recommended config in your ESLint config:

// eslint.config.{js|ts)

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

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

Editor setup

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

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

Rules

| 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) | ✔ | ✔ |