Tailwind Auto Fix

Tailwind Auto Fix is a VS Code extension created by Madhukar Ajay for working with Tailwind CSS v4 utilities and theme tokens.

It helps convert hardcoded Tailwind values into reusable Tailwind v4 utilities while preserving responsive and state variants.

Features

Convert arbitrary spacing values into Tailwind numeric utilities.
Convert custom @theme values into reusable theme utilities.
Match project theme tokens before Tailwind default tokens.
Support text sizes and colors.
Support background and border colors.
Support border, outline, and ring widths.
Support radius and shadow tokens.
Support font weight, leading, and tracking.
Support tab-* and zoom-* theme utilities.
Preserve variants such as hover:, focus:, md:, lg:, and dark:.
Leave unsupported values unchanged.

Example

Before

<div class="p-[20px] bg-[#2563eb] rounded-[12px]">
  Card
</div>

After

<div class="p-5 bg-primary rounded-card">
  Card
</div>

Text Example

<h1 class="text-[40px] text-[#0f172a]">
  Heading
</h1>

becomes:

<h1 class="text-display text-text">
  Heading
</h1>

Tailwind CSS v4

The extension works with Tailwind CSS v4 theme variables:

@import "tailwindcss";

@theme {
  --color-primary: #2563eb;
  --text-display: 40px;
  --text-body: 16px;
  --radius-card: 12px;
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Commands

Tailwind Auto Fix: Fix All

Runs the complete conversion pipeline.

Tailwind Auto Fix: Convert to Arbitrary

Converts supported numeric utilities to arbitrary values.

p-5   → p-[20px]
gap-4 → gap-[16px]

Tailwind Auto Fix: Convert Theme Values

Converts arbitrary values that match project or Tailwind theme tokens.

Tailwind Auto Fix: Normalize Tailwind v4 Utilities

Runs the normalization pipeline.

Usage

Open a Tailwind CSS v4 project in VS Code.

Press:

Ctrl + Shift + P

Then run:

Tailwind Auto Fix: Fix All

Installation

From VSIX

Open VS Code.
Press Ctrl + Shift + P.
Select Extensions: Install from VSIX...
Select the .vsix package.
Reload VS Code if required.

Supported Areas

Spacing
Colors
Text sizes
Font families
Font weights
Radius
Shadows
Leading
Tracking
Border widths
Outline widths
Ring widths
Tab size
Zoom
Responsive and state variants

Safety

The extension does not force unsupported values into invalid Tailwind utilities.

For example:

border-[1.5px]

remains:

border-[1.5px]

when no safe canonical utility exists.

Requirements

Visual Studio Code
Tailwind CSS v4 project

Author

Madhukar Ajay

GitHub: https://github.com/MadhukarAjay-Frontend/tailwind-auto-fix

License

MIT License