Registry / devops / tailwind-canonical

tailwind-canonical

library0.3.0jsnpmunverified

An ESLint plugin for Tailwind CSS that lints and auto-fixes arbitrary values (e.g., `w-[100px]`) when a canonical utility class (e.g., `w-24`) exists. v0.3.0 requires ESLint >=8.0.0, tailwind-merge >=2.0.0, and Node >=22. Ships TypeScript types. Focused on reducing arbitrary values for consistency; distinct from general Tailwind linting tools like `eslint-plugin-tailwindcss` which cover ordering and class existence.

devops

npm install tailwind-canonical

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TAILWIND-CANONICAL

tailwind-canonical

devopsjavascriptv0.3.0

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.

plugin

✓ const tailwindCanonical = require('tailwind-canonical');

✗ import tailwindCanonical from 'tailwind-canonical';

Plugin is exported as CommonJS only; ESM default import not supported. Use require or dynamic import.

rules

✓ const { rules } = require('tailwind-canonical');

Access all rules via destructured object from require.

RuleName

✓ import type { RuleName } from 'tailwind-canonical';

✗ const { RuleName } = require('tailwind-canonical');

Type import only; RuleName is not a runtime value.

Shows how to enable the ESLint plugin with the no-arbitrary-with-canonical rule to flag arbitrary values that have canonical equivalents.

// .eslintrc.cjs module.exports = { plugins: ['canonical'], rules: { 'canonical/no-arbitrary-with-canonical': 'error', }, }; // In your Tailwind usage: // Bad (lints): <div class="w-[100px]"> // Good: <div class="w-24">

Debug

Known issues

breakingRequires Node >=22; older Node versions will fail to load the plugin.

fix

Upgrade Node to version 22 or later.

affects: >=0.3.0

deprecatedThe plugin exports only CommonJS; ESM import will return an empty object.

fix

Use require() or convert to CommonJS config file.

affects: >=0.1.0

gotchatailwind-merge >=2.0.0 must be installed; the plugin will silently produce no results if missing.

fix

Add tailwind-merge as a dependency (e.g., npm install tailwind-merge).

affects: >=0.3.0

gotchaPlugin name loaded as 'canonical' not 'tailwind-canonical' in ESLint config plugins array.

fix

Use 'canonical' as the plugin key (e.g., plugins: ['canonical']).

affects: >=0.1.0

gotchaThe rule only flags arbitrary values with exact canonical equivalents; it does not catch all arbitrary value misuse.

fix

Consider additional rules from eslint-plugin-tailwindcss for broader coverage.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'tailwind-merge'

Missing peer dependency tailwind-merge.

fix

Run npm install tailwind-merge

ESLint: Failed to load plugin 'canonical': Cannot find module 'tailwind-canonical'

Plugin not installed or name mistyped (e.g., 'tailwind-canonical' instead of 'canonical').

fix

Install the package (npm install tailwind-canonical) and use plugins: ['canonical'] in config.

TypeError: tailwindCanonical is not a function

Using default import (import tailwindCanonical from ...) which is not supported.

fix

Use const tailwindCanonical = require('tailwind-canonical') or destructure as needed.

The plugin 'canonical' does not exist

ESLint config expects the plugin name to match the installed package name but you used a different key.

fix

Ensure plugins array contains 'canonical' (not 'tailwind-canonical').

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

tailwind-mergerequiredUsed to resolve arbitrary value classes to canonical equivalents; peer dependency.

eslintrequiredPeer dependency required for plugin usage.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/peak-lab/tailwind-canonical ↗

packagetailwind-canonical ↗

homepagehttps://github.com/peak-lab/tailwind-canonical#readme ↗