Registry / testing / eslint-plugin-tailwind-canonical-classes

eslint-plugin-tailwind-canonical-classes

library1.3.3jsnpmunverified

ESLint plugin that enforces canonical Tailwind CSS class names using Tailwind CSS v4's official canonicalization API. Version 1.3.3, actively maintained with regular releases. Key differentiators: integrates directly with Tailwind v4's `canonicalizeCandidates` for accurate class ordering and aliasing, supports auto-fix, works with utility functions like `cn()`, `clsx()`, and `twMerge()`, provides zero-config recommended setups for both flat and legacy ESLint configs. Alternative to manual class sorting plugins, but requires Tailwind v4 and Node 18+.

testing devops

npm install eslint-plugin-tailwind-canonical-classes

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-TAIL

eslint-plugin-tailwind-canonical-classes

testingjavascriptv1.3.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

tailwindCanonicalClasses

✓ import tailwindCanonicalClasses from 'eslint-plugin-tailwind-canonical-classes'

✗ const tailwindCanonicalClasses = require('eslint-plugin-tailwind-canonical-classes')

Default import for plugin object in ESM. No named exports for the plugin itself.

flat/recommended config

✓ import tailwindCanonicalClasses from 'eslint-plugin-tailwind-canonical-classes'; export default [...tailwindCanonicalClasses.configs['flat/recommended'], { rules: { 'tailwind-canonical-classes/tailwind-canonical-classes': ['warn', { cssPath: './styles/globals.css' }] } }]

✗ Cannot use spread operator with require() or with config name spaces

Access config via configs['flat/recommended'] for ESLint flat config (recommended).

tailwind-canonical-classes/tailwind-canonical-classes rule

✓ rules: { 'tailwind-canonical-classes/tailwind-canonical-classes': ['warn', { cssPath: './styles/globals.css' }] }

✗ rules: { 'tailwindCanonicalClasses': 'warn' } or misspelling plugin prefix

Rule name must include plugin prefix: 'tailwind-canonical-classes/tailwind-canonical-classes'. The cssPath option is required.

Minimal ESLint flat config setup with recommended config and required cssPath option.

import tailwindCanonicalClasses from 'eslint-plugin-tailwind-canonical-classes'; export default [ ...tailwindCanonicalClasses.configs['flat/recommended'], { rules: { 'tailwind-canonical-classes/tailwind-canonical-classes': [ 'warn', { cssPath: './src/styles/globals.css', }, ], }, }, ];

Debug

Known issues

breakingRequires Node.js >= 18.0.0. Older Node versions will cause runtime errors.

fix

Update Node.js to v18 or later.

affects: <18

breakingRequires Tailwind CSS v4. Does not work with v3 or earlier.

fix

Use Tailwind CSS v3 with alternative plugin like eslint-plugin-tailwindcss.

affects: >=1.0.0

breakingESLint 10 no longer supports legacy .eslintrc* config files. Only flat config works.

fix

Migrate to ESLint flat config (eslint.config.*).

affects: >=10.0.0

gotchaThe cssPath option is required and must point to a valid CSS file with Tailwind directives (@import 'tailwindcss').

fix

Set cssPath to your main CSS file that imports Tailwind. Without it, canonicalization will fail silently.

affects: >=1.0.0

gotchaRule 'tailwind-canonical-classes/tailwind-canonical-classes' must be referenced with full prefix. Short names like 'canonical-classes' are not recognized.

fix

Use 'tailwind-canonical-classes/tailwind-canonical-classes' as the rule name.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module '@tailwindcss/node'

Missing required peer dependency @tailwindcss/node.

fix

Install @tailwindcss/node: npm install --save-dev @tailwindcss/node

Error: Failed to load config "eslint-plugin-tailwind-canonical-classes" to extend from.

ESLint config extends field used with plugin name instead of plugin object in flat config.

fix

Use import and spread syntax in flat config: import plugin from '...'; export default [...plugin.configs['flat/recommended']]

Error: Cannot find module 'tailwindcss/utilities' or similar.

Tailwind CSS v3 import paths used; this plugin requires Tailwind v4.

fix

Update Tailwind to v4 and import '@tailwindcss/node' not 'tailwindcss' directly.

Parsing error: The keyword 'import' is reserved

ESLint legacy config (.eslintrc) used with ES module import syntax.

fix

Use flat config (eslint.config.mjs) with import, or convert to CommonJS require for legacy config.

Upgrade

Version history

1.3.3latest on npm

Audit

Dependencies

@tailwindcss/noderequiredRequired to access Tailwind CSS v4's canonicalization API at runtime

eslintrequiredPeer dependency for plugin integration

Agent activity

9 hits · last 30 days

node

Perplexity

Resources

githubhttps://github.com/MaisonnatM/eslint-plugin-tailwind-canonical-classes ↗

packageeslint-plugin-tailwind-canonical-classes ↗

homepagehttps://github.com/MaisonnatM/eslint-plugin-tailwind-canonical-classes#readme ↗