CSS Class Extractor
Extract all unique CSS class names from HTML — sorted by frequency or alphabetically.
32 unique classes
flex2×
font-bold2×
hover:text-blue-6002×
nav-link2×
text-gray-6002×
bg-gradient-to-r1×
bg-white1×
container1×
from-blue-5001×
gap-41×
hero1×
hero-subtitle1×
hero-title1×
items-center1×
justify-between1×
main-content1×
mt-21×
mx-auto1×
nav1×
nav-logo1×
nav-menu1×
p-81×
px-41×
py-81×
rounded-xl1×
shadow-sm1×
site-header1×
text-4xl1×
text-lg1×
text-white1×
text-white/801×
to-purple-5001×
How CSS class extraction works
The extractor scans HTML for class="…" and className="…"attributes (JSX-friendly) using a regex tokenizer — no DOMParser required. Each attribute value is split on whitespace, classes are counted, and duplicates merged. The frequency count helps identify utility classes used most across a template.
To format the HTML itself, try HTML Formatter. For CSS formatting, see CSS Formatter. To extract hyperlinks, use Link Extractor.
Private & free — this tool runs entirely in your browser.
Recommended: IndieKit — Ship your Next.js startup in days.affiliate
Related Developer Utilities tools
RegExp Tester
Test regular expressions and inspect matches locally.
Regex Visualizer
Visual regex pattern diagram with live match highlighting and capture group annotations.
Subnet Calculator
Compute CIDR subnets, usable hosts, and network ranges.
Cron Parser
Translate cron syntax into plain English.
URL Parser
Break a URL into protocol, host, path, and query parts.
HTML Previewer
Paste HTML and see it rendered live in a safe, sandboxed preview.
HTTP Status Code Reference
Search and look up every HTTP status code and its meaning.
MIME Type Lookup
Find the MIME type for a file extension, or the extensions for a MIME type.