Tailwind A11y Fixer

Catches Tailwind CSS text-* / bg-* color pairs that fail WCAG 2.1 AA contrast — right in the editor, as you type — and fixes them in one click.

Why

Low-contrast text is easy to miss — text-gray-400 on a white card looks fine at a glance and can still be genuinely hard to read. This extension checks that math for you, live, without a separate linter or a browser devtools panel.

Free vs. Pro

Pro is unlocked with a license key from Gumroad — see Using Pro below.

Installation

1. Install Tailwind A11y Fixer from the VS Code Marketplace (or run ext install Skipkit.tailwind-a11y-fixer).
2. Open a project that uses Tailwind's default color palette. No configuration needed.

Usage

Free: fixing one issue at a time

Any element combining a text-{color}-{shade} and bg-{color}-{shade} class (including a dark: variant chain) that fails WCAG's 4.5:1 normal-text minimum is underlined with a warning, showing the actual computed ratio on hover.

Click the lightbulb over a flagged class (or press the Quick Fix keybinding) to replace it with the nearest passing shade in the same hue — e.g. text-gray-400 on a white background becomes text-gray-600, not a jump straight to black, so the fix stays close to your original design.

Pro: fixing a whole file at once

Run Tailwind A11y Fixer: Fix all contrast issues in file from the Command Palette to apply every available fix in the active file as a single edit, instead of clicking through each squiggle individually.

Using Pro

1. Purchase a license key: https://skipkit.gumroad.com/l/Tailwinda11yFixerPro
2. Run Tailwind A11y Fixer: Enter License Key from the Command Palette and paste the key from your Gumroad confirmation email.
3. Run Tailwind A11y Fixer: Fix all contrast issues in file whenever you want.

Your key is stored in VS Code's SecretStorage and re-checked against Gumroad periodically — no key is required to keep using the free Quick Fix.

What it checks

• Text/background color pairs on the same element, matched by variant chain (a base text-* is only compared against a base bg-*, and dark:text-* only against dark:bg-*).
• Tailwind's default color palette shades (slate, gray, blue, emerald, rose, amber, etc.).

Known limitations

• Custom @theme colors and arbitrary values (bg-[#123456]) aren't in the default palette, so they're skipped rather than guessed at.
• Classes with an opacity modifier (bg-slate-900/50) are skipped — the actual rendered color depends on whatever's underneath, which isn't knowable from source alone.
• Only checks the 4.5:1 normal-text threshold; it doesn't yet account for large-text's relaxed 3:1 threshold based on surrounding font-size/weight classes.

Requirements

None beyond a project using Tailwind's default color palette. No separate linter install, no configuration file.

Release Notes

0.0.1

Initial release: live contrast diagnostics, single Quick Fix, and a Pro "Fix all in file" command.