Free online CSS class compare tool. Paste two class lists to see which classes they share and which sit in only one list. Order and repeats are ignored, and the compare runs in the browser, so the classes are never uploaded.
Developer tools by OnlinePCApps since 2013
Two long class strings look almost the same, and the one class that differs is easy to miss. The free online CSS class compare tool lines them up as sets, so shared and odd classes stand out.
Two utility class strings, the kind Tailwind or Bootstrap produce, can run to dozens of tokens. The online CSS class compare tool pulls out the single class one side has and the other lacks, which the eye slides right past.
A set comparison answers three questions in one pass: which classes both lists carry, which belong to only the first and which to only the second. The result is grouped, so the overlap and the differences show apart.
A component gains and drops classes as it toggles, opens or errors. Copy the class list from two states, paste both into the online CSS class compare tool and see which classes a state added or removed.
Paste a class list into Left Class List and another into Right Class List, or select Upload on either side to add a .txt, .css, .md, .jsx, .tsx or .html file. Separate classes with spaces, commas or new lines.
The Class Comparison Breakdown fills in live, so there is no Compare button to select. Every group, Only in Left, In Both (Common) and Only in Right, shows a count. Total Unique sits above them.
Select Copy String on any group to copy its classes, or select one class to copy only that name. Swap Left/Right flips the two lists, Search classes filters all three groups and Clear empties everything.
To compare classes is to treat two lists as sets. The online CSS class compare tool shows where they meet and where they differ.
Both lists are split into class names on spaces, commas and new lines. Quote marks are dropped first, so a copied value or a loose list drops straight in.
In Both (Common) holds the classes both lists carry. Only in Left and Only in Right hold what a list has alone. The three sit apart in the Class Comparison Breakdown, so the overlap and the differences show separately.
Order makes no difference, and a class written twice counts once. Results list A to Z, so two lists with the same classes in a different arrangement come out as a full match with nothing unique.
Total Unique counts every different class across both lists, and every group shows its own count. Search classes filters all three groups, Swap Left/Right flips the lists and Copy String copies a group.
To compare CSS classes, to diff two class lists and to find shared and unique class names all name one task. A search for CSS class compare lands on the online CSS class compare tool above.
A comparison checks two class sets and reports where they meet. The cases below show what the tool does and where it stops.
| The case | Result | What happens and why |
|---|---|---|
| Input | list or value | A list of class names on either side, or the value copied from a class attribute. |
| Separators | space, comma, line | Spaces, commas, tabs and new lines all split classes, so any list drops in. |
| Quote marks | dropped | Straight and backtick quote marks are removed before the split. |
| Class attribute | adds class= | Pasting the entire attribute leaves a class= token in the result. Paste the value only. |
| Shared | In Both (Common) | The classes both lists carry, the overlap of the two sets. |
| Only in one | Left or Right | Only in Left and Only in Right hold the classes a list carries alone. |
| Order | ignored | Every list is a set, so arrangement makes no difference. Results list A to Z. |
| Duplicates | counted once | A class written twice in a list counts a single time. |
| Case | sensitive | Btn and btn are two classes. There is no fold-case option, so lowercase both lists first. |
| Dot prefix | kept | .btn and btn count as different names. Remove the dots before comparing. |
| Variants | one token | hover:bg-blue-500 is a single class name, so it matches only itself. |
| Styles | not compared | It matches names, not what the CSS rules behind them do. |
| Search classes | filters | Filters all three groups by text, ignoring case. |
| Copy | group or class | Copy String copies a group as a space-separated list. Selecting a class copies that name. |
| Uploaded file | every word | Upload accepts .txt, .css, .md, .jsx, .tsx or .html files. Every word in a file becomes a token, so paste class strings, not entire files. |
| Where it runs | on the device | The lists are compared in the browser, so nothing is uploaded. |
How a Class Comparison Works
A class comparison treats every class list as a set rather than a sequence. The online CSS class compare tool splits every side into class names, breaking on spaces, commas and new lines, then drops repeats. From there it is set arithmetic. The intersection, the names present in both sets, is the shared group. The names in the first set but not the second, and those in the second but not the first, form the two unique groups. This is the key difference from a line by line text diff. A text diff cares about order and reports every edit in sequence, which suits a stylesheet checked top to bottom. A class comparison ignores order and answers a different question: which class names two lists have in common and which every holds alone. Two honest limits matter. The tool compares class names, not the CSS rules behind them, so two differently named classes with identical styles still count as different. And class names are case-sensitive, with no fold-case option, so lowercase both lists when case should not count. The references below cover the pieces.
Both compare two inputs. The split is a set of names against a line by line diff that keeps order.
| Point of comparison | This tool Online class compare On the device | A text diff A line by line tool |
|---|---|---|
| How it compares | As a set of class names | Line by line, in order |
| Price and caps | Free with no sign-up | Free tier often capped |
| Does order matter | Order ignored, sets only | Reorder shows as a difference |
| Grouped result | Shared and unique groups | Added and removed lines |
| An entire stylesheet | Only two class lists | Every line of a file |
A text diff wins for an entire file checked in order, like a stylesheet or a script where every changed line matters. The online CSS class compare tool wins for two class lists where order is irrelevant and the question is which names they share. Online file tools and whether yours uploads goes deeper on where pasted markup goes.
Both lists are split and compared inside the browser, so the work is client-side and the classes stay on the machine that entered them. No copy is passed to a server for the job.
Markup pasted to compare often comes from unreleased work, a private component or an internal tool never meant for an outside server. A hosted tool would upload it to compare, far more exposure than checking two class lists is worth.
All of these compare two sets of classes. They differ in setup, in what they report and in effort.
A diff, a script, the console and the naked eye all compare classes, yet every one keeps order, needs code or strains on a long list. The online CSS class compare tool groups two lists as sets with nothing to set up.
Keep these in mind for a clearer result.
Every list counts as a set, so order and repeats do not count. For a comparison that keeps order and reports every changed line, a text diff is the fit. This tool answers which class names two lists share and which every holds alone.
The comparison is on the class names, not on what the CSS rules behind them do. Two classes with different names but identical styles still count as different, since the tool never resolves the stylesheet, only the list of names.
Class names are case-sensitive, so Btn and btn count as two classes. There is no fold-case option on this page, so lowercase both lists first when case should not count.
The online CSS class compare tool takes two lists at once, which fits the pair in hand. Class sets from many components, or a check on every build, belong on a short script or a CSS tool that opens files from disk.
A script gathers the class names used across many components and compares the sets, so shared and stray classes surface project-wide.
A CSS checker matches the classes a stylesheet defines against those the markup uses, so classes defined but never applied are flagged.
A step in the build compares class sets and can fail when an expected class goes missing, so a drift is caught before it ships.
No sign-up needed. Paste two lists into the online CSS class compare tool and the groups appear live.