ClassExtractor is a Visual Studio Code extension that helps front-end developers quickly extract unique CSS class names from selected HTML, JSX, or Shopify Liquid code and copy them to the clipboard — ready to use in your stylesheets or utility-first frameworks like Tailwind CSS. Here’s an improved and more polished version of your Usage section, keeping it clear, professional, and user-friendly:
To extract CSS class names:
- Select the portion of code containing your HTML, JSX, Liquid, etc.
- Right-click and choose "Extract Classes",
or use the keyboard shortcut:
Ctrl + Alt + E(Windows/Linux)Cmd + Option + E(Mac)
Once triggered, ClassExtractor will extract, clean, and copy the class names to your clipboard — ready to paste into your CSS or utility framework.
-
🔍 Class Name Extraction — Extracts all CSS class names from the selected code.
-
🧼 Duplicate Removal — Returns a clean, unique list of class names.
-
✂️ CSS Format Output — Converts them into
.class-name {}blocks. -
📋 Clipboard Integration — Automatically copies results to your clipboard.
-
🧠 Smart Language Support — Works with:
- HTML
- JSX (
className) - Shopify Liquid (requires the Shopify Liquid extension)
- To extract classes from
.liquidfiles, install the Shopify Liquid VS Code Extension. - To extract classes from
.sveltefiles, install the Svelte for VS Code Extension.
ClassExtractor does not add custom settings at the moment.
- 🎨 UI enhancements and optional file output (
.css)
Developed and maintained by \Tim Dehler Open-source and maintained for the dev community ❤️