Options
Paste your CSS and the HTML that uses it, and this tool removes every selector whose classes or IDs never appear in the HTML. It updates as you type, keeps the rest of your stylesheet exactly as written, and lists everything it removed with line numbers so you can review it. Open several HTML, JavaScript, and template files at once to check a whole site, and protect classes added by scripts with the always-keep list. Your code is processed in your browser and never uploaded.
How to remove unused CSS
- Paste your stylesheet on the CSS tab, or click Open files and select your .css files.
- Switch to HTML and JS and paste every page or template that uses the stylesheet. You can open many files at once, and CSS and HTML files are sorted into the right tab automatically. If you only paste HTML with a
<style>block, that block is cleaned. - Check the Removed tab to review what was taken out. Click any line to jump to it in your CSS.
- Add any classes your JavaScript adds later to Always keep, then copy or download the clean CSS.
How the tool decides what's unused
Every rule's selectors are checked one by one. A selector is removed only when it needs a class or ID that never appears in your HTML. If a rule has several selectors and only some are unused, just those are removed and the rule stays.
| Selector | Kept when |
|---|---|
.card .title | Both card and title appear in the HTML |
.btn, .btn-ghost | Each selector is checked separately, so .btn can stay while .btn-ghost is removed |
#main | An element has id="main", or a link, label, or script refers to #main |
a:not(.external) | Always, because a class inside :not() isn't required |
h1, input[type="text"], :root | Always, because element, attribute, and root selectors don't depend on classes |
.md\:flex, .w-1\/2 | The unescaped class md:flex or w-1/2 appears, so Tailwind-style classes work |
@media and @supports blocks | Cleaned inside, and removed entirely if nothing is left |
@keyframes | Its name is used in an animation that's still in the CSS |
@font-face, @import, nested rules | Always kept, to be safe |
Safer vs. precise detection
Anywhere in the HTML and JS keeps a class if its name shows up anywhere in your files, including inside JavaScript strings and template logic. This catches classes that are built or toggled by code, at the cost of keeping a few classes whose names happen to appear as ordinary words.
Class attributes and script calls only looks at class and id attributes, className, Vue and Angular class bindings, classList calls, and selectors in querySelector, getElementById, and jQuery. It removes more, so review the Removed tab before using the result.
Classes added by JavaScript
The biggest risk with any unused CSS tool is a class that only appears after a click or a page load, like a modal's open state or a slider library's classes. Include your JavaScript files on the HTML and JS tab so their class names are found, keep Keep state classes on for common names like active, open, show, and is-*, and add anything else to Always keep. That field accepts exact names, wildcards like swiper-*, and regular expressions like /^modal-/.
Frequently asked questions
Is it safe to use the result on my live site?
Review it first. The tool can only see the files you give it, so classes added at runtime by scripts, a CMS, or third-party widgets may look unused. Check the Removed tab, add anything that should stay to Always keep, and test the page before replacing your stylesheet.
Can I check a whole website with several pages?
Yes. Open or drop all the HTML, template, and JavaScript files at once. A class used on any page counts as used, so the result works for every page.
Does it work with Bootstrap and Tailwind?
Yes. Paste the framework CSS and your HTML, and every component you don't use is removed. Tailwind classes with escaped characters like md:flex and w-1/2 are matched correctly. For Tailwind projects, the built-in content scanning in Tailwind itself is usually the better long-term setup.
Will it reformat my CSS?
No. Only unused rules and selectors are removed, and your formatting, comments, and order stay the same. Turn on Minify output if you want the smallest possible file.
What does the Class report show?
It lists every class in your CSS that never appears in the HTML, and every class used in the HTML that has no CSS rule. The second list is handy for spotting typos and leftover markup.
How is this different from PurgeCSS or Chrome's Coverage tab?
PurgeCSS does the same kind of check but needs Node.js and a build setup. Chrome's Coverage tab shows what one page used during one visit, so it misses other pages and states. This tool needs no setup, checks as many files as you give it, and shows exactly what it removed.
Is my code uploaded anywhere?
No. All files are read and processed by JavaScript in your browser.