Registry / devops / prettier-plugin-tailwindcss-canonical-classes

prettier-plugin-tailwindcss-canonical-classes

library0.1.4jsnpmunverified

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.

devops testing

npm install prettier-plugin-tailwindcss-canonical-classes

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-TA

prettier-plugin-tailwindcss-canonical-classes

devopsjavascriptv0.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

prettier-plugin-tailwindcss-canonical-classes (plugin string)

✓ plugins: ['prettier-plugin-tailwindcss-canonical-classes']

✗ plugins: ['@laststance/tailwindcss-canonical-classes-core']

The plugin is referenced by its npm package name in Prettier config; do not use the core package name.

Default export (if programmatic use)

✓ import plugin from 'prettier-plugin-tailwindcss-canonical-classes'

✗ const plugin = require('prettier-plugin-tailwindcss-canonical-classes')

Plugin is ESM-only; CommonJS require may fail. For programmatic use, import default.

Plugin options type

✓ import type { PluginOptions } from 'prettier-plugin-tailwindcss-canonical-classes'

TypeScript types are exported for plugin options (tailwindcssCanonicalStylesheet, tailwindcssCanonicalRootFontSize).

Installs plugin, configures it in .prettierrc with stylesheet path and root font size, then demonstrates canonicalization of arbitrary value classes to design tokens.

// Install: npm install -D prettier-plugin-tailwindcss-canonical-classes prettier tailwindcss // .prettierrc { "plugins": ["prettier-plugin-tailwindcss-canonical-classes"], "tailwindcssCanonicalStylesheet": "./src/globals.css", "tailwindcssCanonicalRootFontSize": 16 } // Input: <div class="mt-[16px] text-[red] p-[1rem]">Hello</div> // Output after Prettier: <div class="mt-4 text-red p-4">Hello</div>

Debug

Known issues

breakingPlugin chaining conflict with prettier-plugin-tailwindcss: order matters. prettier-plugin-tailwindcss-canonical-classes must appear before prettier-plugin-tailwindcss in the plugins array.

fix

List prettier-plugin-tailwindcss-canonical-classes first in plugins array, e.g., ["prettier-plugin-tailwindcss-canonical-classes", "prettier-plugin-tailwindcss"].

affects: >=0.1.3

breakingv0.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.

fix

Import only from the main package: import plugin from 'prettier-plugin-tailwindcss-canonical-classes'.

affects: >=0.1.2

deprecatedv0.1.3 renamed core dependency from @laststance/tailwindcss-canonical-core to @laststance/tailwindcss-canonical-classes-core. The old core package is deprecated.

fix

Update to v0.1.4; do not install @laststance/tailwindcss-canonical-core manually.

affects: <0.1.3

gotchaThe plugin requires Tailwind CSS v4. Using with Tailwind v3 will cause runtime errors or no canonicalization.

fix

Ensure your project uses Tailwind CSS ^4.0.0.

affects: all

gotchaPlugin 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.

fix

If you need canonicalization in other file types, consider adding a Prettier override.

affects: all

Errors

Common errors & fixes

Cannot find module 'prettier-plugin-tailwindcss-canonical-classes'

Package not installed or not in node_modules; possible missing peer deps.

fix

Run: npm install -D prettier-plugin-tailwindcss-canonical-classes prettier tailwindcss

Error: prettier-plugin-tailwindcss-canonical-classes: Plugin configuration error. Option 'tailwindcssCanonicalStylesheet' must be a string path or undefined.

Provided option value is not a string (e.g., boolean or number).

fix

Set tailwindcssCanonicalStylesheet to a valid path string or omit it.

TypeError: Cannot read properties of undefined (reading 'canonicalize')

Missing core dependency; likely due to mistaken import of @laststance/tailwindcss-canonical-classes-core instead of the plugin.

fix

Use the plugin package name: 'prettier-plugin-tailwindcss-canonical-classes' in plugins array.

Error: Could not find Tailwind CSS entry file at 'src/index.css'

The tailwindcssCanonicalStylesheet path is incorrect or file does not exist.

fix

Correct the path: e.g., tailwindcssCanonicalStylesheet: './src/globals.css' or use default (omit option).

Upgrade

Version history

0.1.4latest on npm

Audit

Dependencies

prettierrequiredPeer dependency; plugin runs within Prettier 3.x

tailwindcssrequiredPeer dependency; requires Tailwind CSS v4 for canonical class resolution

@laststance/tailwindcss-canonical-classes-coreoptionalInternal core library for canonical transformation logic

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/laststance/tailwindcss-canonical-classes-monrepo ↗

packagehttps://www.npmjs.com/package/prettier-plugin-tailwindcss-canonical-classes ↗