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

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([
  {
    extends: [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)	✔	✔