Nifty CSS Classes
Complete CSS class names in HTML, JSX, Vue, Svelte, PHP and templates from your stylesheets, including SCSS nesting and linked files, with hover and go to definition.
Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.
Features
- Class names as you type. Inside
class="…", className="…", className={clsx("…")}, template literals, :class, class:list and [ngClass], get every class your stylesheets define, with the CSS rule shown beside each suggestion.
- Every kind of stylesheet. Reads
.css, .scss and .less files in the workspace. SCSS and Less nesting is resolved, so .card { &__title {} &--wide {} } gives you card__title and card--wide. Classes from <style> blocks in the same file are included, as are local stylesheets the page links with <link rel="stylesheet">, even from node_modules.
- Hover over a class to see its rule and where it's defined. Go to Definition (F12, Ctrl+click) opens the stylesheet at the rule.
- Works where you write markup. HTML, JSX/TSX, Vue, Svelte, Astro, PHP, Blade, Razor, Jinja, Twig, Nunjucks, Django, Handlebars, ERB, Liquid, Markdown and MDX.
- Stays current. New and edited stylesheets are picked up straight away, including unsaved edits.
- Framework CSS too. Add Bootstrap or any other stylesheet from
node_modules with nifty.classes.extraFiles.
- Works in the browser on vscode.dev and github.dev.
Commands
| Command |
What it does |
Nifty CSS Classes: Re-index Stylesheets |
Read all stylesheets again |
Settings
| Setting |
Default |
What it does |
nifty.classes.include |
**/*.{css,scss,less} |
Stylesheets to read class names from |
nifty.classes.exclude |
node_modules, build output… |
Files to leave out |
nifty.classes.extraFiles |
[] |
More stylesheets, e.g. node_modules/bootstrap/dist/css/bootstrap.css |
nifty.classes.maxFiles |
3000 |
Most stylesheets to index |
nifty.classes.maxFileSizeKB |
2048 |
Skip stylesheets larger than this |
Install
- VS Code: search for "Nifty CSS Classes" in the Extensions view, or install from the Visual Studio Marketplace.
- Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.
Privacy
This extension collects no telemetry and needs no account.
- Nifty SCSS IntelliSense: Variables & Mixins: Variables, mixins, functions and placeholders from all your SCSS files: completion that understands @use namespaces and @import, hover with values and SassDoc, and go to definition. (Open VSX)
- Nifty CSS Variables: Custom Property IntelliSense: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette. (Open VSX)
- Nifty Tags: Auto Rename & Auto Close Tags: Rename paired tags as you type and close tags automatically, in JSX, TSX, Vue, Svelte, Astro, XML, PHP and template files, using the editor's built-in linked editing. (Open VSX)
- Nifty Beautify: Format HTML in PHP, Blade & Twig: Format HTML inside PHP, Blade, Twig, Jinja, Handlebars, ERB and Liquid templates without breaking the template tags. (Open VSX)
- Nifty C# Scratchpad: Run C# Snippets & NuGet: Run C# snippets instantly with NuGet packages and rich Dump() output, a LINQPad-style scratchpad and Polyglot Notebooks replacement. (Open VSX)
- Nifty C# Templates: New Class, Record & Namespace: New C# class, interface, record, enum, test and controller files with the right namespace, plus namespace syncing. (Open VSX)
See all 100+ Nifty extensions and web tools at https://getnifty.dev
| |
