Check a class list or markup for typos: every class is tested against Tailwind's core utility grammar, with unknown classes, bad variants and arbitrary values reported separately.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
The bug that produces no error
A misspelled Tailwind class fails silently — text-blu-500 generates nothing, your text stays the wrong color, and no console error tells you why. This validator parses every class against a grammar of Tailwind’s core utilities — variants, negatives, !important, opacity modifiers and arbitrary values included — and sorts them into four honest buckets: valid core, arbitrary (assumed valid), unknown, and bad variant.
Worked example
Input: flex items-center text-blu-500 hover:tex-lg foo:p-2 w-[347px]
✖ Not recognized: text-blu-500, hover:tex-lg
✖ Unknown variant: foo:p-2
◐ Arbitrary: w-[347px]
✔ Valid: flex items-centerWhat “unknown” honestly means
- Classes from plugins, @apply components, safelists and your own CSS are real but outside any core grammar — the validator reports them as unknown so you can vet them, never as “wrong”.
- Arbitrary values are recognized syntactically; whether
[347px]is the right value is CSS judgement, not class-name validation. - The grammar covers both v3 names and v4 renames, so class lists from either version validate cleanly.
Practical uses
- Paste a whole component before a PR — attributes are extracted from HTML/JSX automatically.
- Audit copy-pasted snippets from tutorials, which routinely carry typos or pre-v3 class names.
- Chain into the Class Cleaner to also remove duplicates and conflicts after validating.
How to use the Tailwind Class Validator
- Paste a class list — or whole HTML/JSX; class="…" attributes are extracted automatically.
- Click "Validate classes".
- Read the four buckets: valid core, arbitrary values, unknown, bad variant.
- Fix typos and re-run; your input stays in place.
Frequently asked questions
What can this validator actually check?
Each class is parsed against a grammar of Tailwind's core utilities — variants, negative values, !important, opacity modifiers and arbitrary values included. It catches the real-world killers: typos like text-blu-500, wrong variant names, and half-remembered utilities.
Why is my custom class reported as unknown?
Classes from plugins, @apply components, safelists or your own CSS are invisible to a grammar checker — "unknown" means "not a core utility", not "wrong". The report keeps them in a separate bucket precisely so you can vet them rather than delete them.
Are arbitrary values validated?
They are recognized (w-[347px], [display:grid]) and marked "assumed valid" — Tailwind generates whatever is inside the brackets, so their correctness is CSS correctness, which a class-name checker cannot judge.
Does it know v4 class names?
Yes — the grammar includes v4 renames (shadow-xs, outline-hidden, ring-3, bg-linear-to-*) alongside v3 names, so class lists from either version validate.
Convert hand-written CSS to Tailwind
Tailwind utility classes equivalent to your CSS, checked and ordered.
- CSS to Tailwind ConverterTranslate the declarations into utility classes.
- Tailwind Class Validator you are hereConfirm every generated class is real.
- Tailwind Class SorterOrder them the way the Tailwind formatter would.
Move a project to Tailwind v4
Converted markup and a config that matches how v4 expects to be written.
- Tailwind v3 to v4 ConverterConvert the v3 syntax that changed in v4.
- Tailwind Class Validator you are hereCatch class names that no longer exist.
- Tailwind Class CleanerRemove duplicates and classes that cancel each other out.
- Tailwind Class SorterPut the surviving classes into a consistent order.
