prettier-plugin-tailwindcss-normalizer


A Prettier plugin that automatically normalizes Tailwind CSS arbitrary values into standard utility classes, helping maintain consistent and optimized CSS across your project.

Requires Prettier v3.0.0 or higher (Prettier v2 is not supported)

Features

- Converts arbitrary values like p-[4px] to standard classes like p-1
- Works with HTML, React/JSX, Vue.js, and Angular
- Only transforms class attributes, leaving comments, text, and other attributes untouched
- Supports padding, margin, sizing, typography, borders, shadows, and more
- Supports all Tailwind CSS variants (responsive, state, dark mode, group, peer, etc.)

Installation

``bash
npm install --save-dev prettier@^3.0.0
npm install --save-dev @youthfulhps/prettier-plugin-tailwindcss-normalizer
`

Usage

$3

Add the plugin to your Prettier configuration:

.prettierrc

`json
{
"plugins": ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"]
}
`

prettier.config.js

`javascript
module.exports = {
plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
};
`

$3

`bash


Format all files

npx prettier --write .

Format specific files

npx prettier --write src/*/.{tsx,jsx,html,vue}
`

Using with Other Prettier Tailwind Plugins

To use this plugin alongside other prettier tailwind plugins (like prettier-plugin-tailwindcss), install and configure prettier-plugin-merge:

`bash
npm install --save-dev prettier-plugin-merge
`

.prettierrc.js

`javascript
module.exports = {
plugins: [
"@youthfulhps/prettier-plugin-tailwindcss-normalizer",
"prettier-plugin-tailwindcss",
"prettier-plugin-merge", // Must be last
],
};
`

Examples

Before:

`jsx



`

After:

`jsx



`

With Variants:

`jsx
// Before


// After



`

Supported Mappings

$3

- Padding: p-[4px] → p-1, px-[16px] → px-4
- Margin: m-[8px] → m-2, my-[12px] → my-3
- Gap: gap-[8px] → gap-2, gap-x-[16px] → gap-x-4

$3

- Width: w-[100px] → w-25, w-[200px] → w-50
- Height: h-[50px] → h-12.5, h-[100px] → h-25

$3

- Font Size: text-[14px] → text-sm, text-[18px] → text-lg
- Letter Spacing: tracking-[-0.05em] → tracking-tighter

$3

- Border Radius: rounded-[4px] → rounded, rounded-[6px] → rounded-md
- Border Width: border-[1px] → border, border-[2px] → border-2

$3

- Box Shadow: shadow-[0_1px_3px_rgba(0,0,0,0.1)] → shadow-sm
- Opacity: opacity-[0.5] → opacity-50

$3

- Rotate: rotate-[-180deg] → -rotate-180
- Translate: translate-x-[-100%] → -translate-x-full

Configuration

$3

By default, Tailwind uses 4px as the base spacing unit (e.g., p-1 = 4px, p-2 = 8px). If you've customized your Tailwind spacing scale, configure the customSpacingUnit option:

.prettierrc.js

`javascript
module.exports = {
plugins: ["@youthfulhps/prettier-plugin-tailwindcss-normalizer"],
customSpacingUnit: 8, // Change to match your Tailwind spacing scale
};
`

Example with customSpacingUnit: 8:

`jsx
// Before


// After



`

See the examples/custom-spacing directory for a complete working example.

Supported Variants

The plugin supports all Tailwind CSS variants:

- Responsive: sm:, md:, lg:, xl:, 2xl:
- State: hover:, focus:, active:, disabled:, etc.
- Dark Mode: dark:
- Group/Peer: group-hover:, peer-checked:, etc.
- Pseudo-elements: before:, after:, placeholder:, etc.
- ARIA: aria-checked:, aria-disabled:, etc.
- Data Attributes: data-[status=active]:
- Arbitrary: [&:nth-child(3)]:, has-[input:focus]:, etc.

Safety Features

The plugin only transforms class-related attributes:

Transformed:

- className attributes in JSX/TSX
- class attributes in HTML
- :class and v-bind:class in Vue
- [class] in Angular
- String literals in template literals
- Function calls like clsx(), classnames(), cn()

Untouched:

- Comments and documentation
- Regular text content
- Other HTML attributes
- JavaScript strings and variables
- CSS in