{"id":42060,"library":"tailwind-canonical","title":"Tailwind Canonical","description":"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.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/peak-lab/tailwind-canonical","tags":["javascript","tailwind","tailwindcss","linter","canonical","arbitrary-values","eslint-plugin","typescript"],"install":[{"cmd":"npm install tailwind-canonical","lang":"bash","label":"npm"},{"cmd":"yarn add tailwind-canonical","lang":"bash","label":"yarn"},{"cmd":"pnpm add tailwind-canonical","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used to resolve arbitrary value classes to canonical equivalents; peer dependency.","package":"tailwind-merge","optional":false},{"reason":"Peer dependency required for plugin usage.","package":"eslint","optional":false}],"imports":[{"note":"Plugin is exported as CommonJS only; ESM default import not supported. Use require or dynamic import.","wrong":"import tailwindCanonical from 'tailwind-canonical';","symbol":"plugin","correct":"const tailwindCanonical = require('tailwind-canonical');"},{"note":"Access all rules via destructured object from require.","wrong":"","symbol":"rules","correct":"const { rules } = require('tailwind-canonical');"},{"note":"Type import only; RuleName is not a runtime value.","wrong":"const { RuleName } = require('tailwind-canonical');","symbol":"RuleName","correct":"import type { RuleName } from 'tailwind-canonical';"}],"quickstart":{"code":"// .eslintrc.cjs\nmodule.exports = {\n  plugins: ['canonical'],\n  rules: {\n    'canonical/no-arbitrary-with-canonical': 'error',\n  },\n};\n\n// In your Tailwind usage:\n// Bad (lints): <div class=\"w-[100px]\">\n// Good:       <div class=\"w-24\">","lang":"javascript","description":"Shows how to enable the ESLint plugin with the no-arbitrary-with-canonical rule to flag arbitrary values that have canonical equivalents."},"warnings":[{"fix":"Upgrade Node to version 22 or later.","message":"Requires Node >=22; older Node versions will fail to load the plugin.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Use require() or convert to CommonJS config file.","message":"The plugin exports only CommonJS; ESM import will return an empty object.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Add tailwind-merge as a dependency (e.g., npm install tailwind-merge).","message":"tailwind-merge >=2.0.0 must be installed; the plugin will silently produce no results if missing.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Use 'canonical' as the plugin key (e.g., plugins: ['canonical']).","message":"Plugin name loaded as 'canonical' not 'tailwind-canonical' in ESLint config plugins array.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider additional rules from eslint-plugin-tailwindcss for broader coverage.","message":"The rule only flags arbitrary values with exact canonical equivalents; it does not catch all arbitrary value misuse.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'-24':27 '100px':19 '2.0.0':36 '22':39 '8.0.0':32 'arbitrari':15,46,73 'arbitrary-valu':72 'auto':13 'auto-fix':12 'canon':2,22,71 'class':24,65 'consist':49 'cover':62 'css':8 'distinct':50 'e.g':17,25 'eslint':4,31,58,76 'eslint-plugin':75 'eslint-plugin-tailwindcss':57 'exist':28,66 'fix':14 'focus':43 'general':52 'javascript':67 'like':56 'lint':10,54 'linter':70 'merg':35 'node':38 'order':63 'plugin':5,59,77 'reduc':45 'requir':30 'ship':40 'tailwind':1,7,34,53,68 'tailwind-merg':33 'tailwindcss':60,69 'tool':55 'type':42 'typescript':41,78 'util':23 'v0.3.0':29 'valu':16,47,74 'w':18,26","created_at":"2026-06-04T18:55:25.600068+00:00","updated_at":"2026-06-04T18:55:25.600068+00:00","problems":[{"fix":"Run npm install tailwind-merge","cause":"Missing peer dependency tailwind-merge.","error":"Cannot find module 'tailwind-merge'"},{"fix":"Install the package (npm install tailwind-canonical) and use plugins: ['canonical'] in config.","cause":"Plugin not installed or name mistyped (e.g., 'tailwind-canonical' instead of 'canonical').","error":"ESLint: Failed to load plugin 'canonical': Cannot find module 'tailwind-canonical'"},{"fix":"Use const tailwindCanonical = require('tailwind-canonical') or destructure as needed.","cause":"Using default import (import tailwindCanonical from ...) which is not supported.","error":"TypeError: tailwindCanonical is not a function"},{"fix":"Ensure plugins array contains 'canonical' (not 'tailwind-canonical').","cause":"ESLint config expects the plugin name to match the installed package name but you used a different key.","error":"The plugin 'canonical' does not exist"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/peak-lab/tailwind-canonical#readme","github":"https://github.com/peak-lab/tailwind-canonical","docs":null,"changelog":null,"pypi":null,"npm":"tailwind-canonical","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}