{"id":20439,"library":"prettier-plugin-tailwindcss-canonical-classes","title":"prettier-plugin-tailwindcss-canonical-classes","description":"Prettier plugin (v0.1.4) that automatically converts non-canonical Tailwind CSS v4 classes (e.g., mt-[16px] → mt-4) to their design-system-native equivalents. Requires Prettier ^3.0.0 and Tailwind CSS ^4.0.0. Ships TypeScript types. Differentiates from official sorting plugin by focusing on canonicalization rather than sorting; both can be chained. Active development with frequent releases. Node.js >= 18 required.","status":"active","version":"0.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/laststance/tailwindcss-canonical-classes-monrepo","tags":["javascript","prettier","plugin","tailwindcss","tailwind","canonical","formatter","suggest-canonical-classes","typescript"],"install":[{"cmd":"npm install prettier-plugin-tailwindcss-canonical-classes","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-tailwindcss-canonical-classes","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-tailwindcss-canonical-classes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin runs within Prettier 3.x","package":"prettier","optional":false},{"reason":"Peer dependency; requires Tailwind CSS v4 for canonical class resolution","package":"tailwindcss","optional":false},{"reason":"Internal core library for canonical transformation logic","package":"@laststance/tailwindcss-canonical-classes-core","optional":true}],"imports":[{"note":"The plugin is referenced by its npm package name in Prettier config; do not use the core package name.","wrong":"plugins: ['@laststance/tailwindcss-canonical-classes-core']","symbol":"prettier-plugin-tailwindcss-canonical-classes (plugin string)","correct":"plugins: ['prettier-plugin-tailwindcss-canonical-classes']"},{"note":"Plugin is ESM-only; CommonJS require may fail. For programmatic use, import default.","wrong":"const plugin = require('prettier-plugin-tailwindcss-canonical-classes')","symbol":"Default export (if programmatic use)","correct":"import plugin from 'prettier-plugin-tailwindcss-canonical-classes'"},{"note":"TypeScript types are exported for plugin options (tailwindcssCanonicalStylesheet, tailwindcssCanonicalRootFontSize).","wrong":"","symbol":"Plugin options type","correct":"import type { PluginOptions } from 'prettier-plugin-tailwindcss-canonical-classes'"}],"quickstart":{"code":"// Install: npm install -D prettier-plugin-tailwindcss-canonical-classes prettier tailwindcss\n// .prettierrc\n{\n \"plugins\": [\"prettier-plugin-tailwindcss-canonical-classes\"],\n \"tailwindcssCanonicalStylesheet\": \"./src/globals.css\",\n \"tailwindcssCanonicalRootFontSize\": 16\n}\n\n// Input:
Hello
\n// Output after Prettier:
Hello
","lang":"typescript","description":"Installs plugin, configures it in .prettierrc with stylesheet path and root font size, then demonstrates canonicalization of arbitrary value classes to design tokens."},"warnings":[{"fix":"List prettier-plugin-tailwindcss-canonical-classes first in plugins array, e.g., [\"prettier-plugin-tailwindcss-canonical-classes\", \"prettier-plugin-tailwindcss\"].","message":"Plugin chaining conflict with prettier-plugin-tailwindcss: order matters. prettier-plugin-tailwindcss-canonical-classes must appear before prettier-plugin-tailwindcss in the plugins array.","severity":"breaking","affected_versions":">=0.1.3"},{"fix":"Import only from the main package: import plugin from 'prettier-plugin-tailwindcss-canonical-classes'.","message":"v0.1.2 removed the \"exports\" field from package.json to fix VSCode extension loading. If you rely on deep imports or programmatic access to subpaths, they may break.","severity":"breaking","affected_versions":">=0.1.2"},{"fix":"Update to v0.1.4; do not install @laststance/tailwindcss-canonical-core manually.","message":"v0.1.3 renamed core dependency from @laststance/tailwindcss-canonical-core to @laststance/tailwindcss-canonical-classes-core. The old core package is deprecated.","severity":"deprecated","affected_versions":"<0.1.3"},{"fix":"Ensure your project uses Tailwind CSS ^4.0.0.","message":"The plugin requires Tailwind CSS v4. Using with Tailwind v3 will cause runtime errors or no canonicalization.","severity":"gotcha","affected_versions":"all"},{"fix":"If you need canonicalization in other file types, consider adding a Prettier override.","message":"Plugin only canonicalizes classes in files listed as supported: .astro, .css, .html, .js, .jsx, .less, .mdx, .scss, .svelte, .ts, .tsx, .vue. Other file types are ignored.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install -D prettier-plugin-tailwindcss-canonical-classes prettier tailwindcss","cause":"Package not installed or not in node_modules; possible missing peer deps.","error":"Cannot find module 'prettier-plugin-tailwindcss-canonical-classes'"},{"fix":"Set tailwindcssCanonicalStylesheet to a valid path string or omit it.","cause":"Provided option value is not a string (e.g., boolean or number).","error":"Error: prettier-plugin-tailwindcss-canonical-classes: Plugin configuration error. Option 'tailwindcssCanonicalStylesheet' must be a string path or undefined."},{"fix":"Use the plugin package name: 'prettier-plugin-tailwindcss-canonical-classes' in plugins array.","cause":"Missing core dependency; likely due to mistaken import of @laststance/tailwindcss-canonical-classes-core instead of the plugin.","error":"TypeError: Cannot read properties of undefined (reading 'canonicalize')"},{"fix":"Correct the path: e.g., tailwindcssCanonicalStylesheet: './src/globals.css' or use default (omit option).","cause":"The tailwindcssCanonicalStylesheet path is incorrect or file does not exist.","error":"Error: Could not find Tailwind CSS entry file at 'src/index.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}