IntelliSense

Auto-completion, hover previews & diagnostics for Yumma CSS in your editor.

Get completions, hover previews, color swatches, conflict warnings & class sorting for Yumma CSS utility classes directly in your editor.

Visual Studio Code

Install from the marketplace

Install from Open VSX

In review, follow on GitHub

VSCodium, Trae, Windsurf & Antigravity

Requirements

Add a yumma.config.mjs file at your workspace root to activate the extension. It reloads automatically when the file changes.

Language Server

Any LSP-compatible editor can run the Yumma CSS language server directly:

npx @yummacss/language-server --stdio

Features

Completion

Get auto-completion suggestions for every utility class as you type.

Hover Previews

View the exact CSS declaration behind any class.

Color Decorators

See inline color swatches next to color utilities.

Conflict Detection

Get real-time warnings when multiple classes set the same CSS property, scoped per-variant. bg-indigo bg-red conflicts since both utilities set background-color, while bg-red h:bg-indigo doesn't since they apply under different conditions.

Quick Fixes

Resolve conflicts with 1-click quick fixes.

Class Sorting

Keep classes in a consistent order by category: Layout → Positioning → Flexbox/Grid → Box Model → Background → Colors → Border/Outline → Typography → Effects → Transition → Interactivity → Table → SVG. Variants stay grouped with their base utility, & orphans move to the end.

Sorting runs on save in VS Code (toggle with yummacss.sortOnSave), or on editor: format in Zed.