ree Styles

Turn familiar Tailwind CSS utility names into ordinary, maintainable CSS.

Install ree Styles from the Visual Studio Marketplace

Start typing a utility such as mt-4 in a CSS, SCSS, or Less file. IntelliSense shows the CSS generated by ree Styles' native utility engine and tells you when the selector already exists elsewhere in the workspace.

Inside a stylesheet rule, accepting a completion replaces the utility token with its declarations. For example, mb-2 becomes margin-bottom: calc(0.25rem * 2); without inserting a nested selector.

Selecting a suggestion inserts the complete CSS rule. You can also place the cursor on a utility name and run ree Styles: Add Tailwind Utility to CSS. If the class already exists, ree Styles opens its definition instead of adding a duplicate.

In regular HTML, accepting a utility completion inside class="..." adds the class name to the markup and its generated rule to the project stylesheet. The complete class attribute is reconciled at that point, so supported utility classes typed earlier without accepting a completion are added in the same batched stylesheet update. ree Styles first uses an explicitly configured target, then a stylesheet linked from the HTML file, then common project stylesheet locations. If more than one file is plausible, it asks once and stores the selection in workspace settings.

ree Styles coexists with Tailwind CSS IntelliSense. It supports files associated with the tailwindcss VS Code language while automatically disabling indexing and completions in projects that actually use Tailwind. Detection is scoped per workspace folder.

Settings

• reeStyles.mode - auto, enabled, or disabled. Auto skips projects with a Tailwind dependency, configuration file, import, or directive.
• reeStyles.targetStylesheet - workspace-relative file for added utilities.
• reeStyles.exclude - glob ignored while indexing project stylesheets.

Project-wide utility maintenance

Run ree Styles: Remove All Unused Utilities to scan the current workspace folder for references across HTML, REE, JavaScript, TypeScript, JSX, TSX, Vue, Svelte, Astro, PHP, common template files, and stylesheets. The command only considers standalone rules recognized by ree Styles and shows a modal preview before removing anything.

Run ree Styles: Add All Undefined Utilities to perform the inverse scan. Static class usages that are supported by ree Styles but missing from project CSS are previewed and then added together in one stylesheet update.

The extension has no dependencies and does not install, import, bundle, or run Tailwind. A checked-in suggestion catalog records which Tailwind release its theme tokens came from.

Teams with the highest security requirements that do not install extensions from the web can review and install the VSIX package directly.

Appreciation

Our sincere appreciation goes to the creator of Tailwind CSS, Adam Wathan, and the entire Tailwind team for the work that inspired this extension. Tailwind has become a de facto standard library for CSS, and ree Styles exists because we needed a way to use that familiar class vocabulary without a single dependency.

That is why we adopted Tailwind's class names.

They say "imitation is the sincerest form of flattery" for a reason.

Kudos!

Development

bun run check
bun run package

bun run package builds the extension and creates ree-styles-<version>.vsix without vsce or other dependencies. Each package run increments the patch version in package.json before writing the VSIX.

Refresh the generated suggestions after a Tailwind release:

bun run update-suggestions
bun run update-suggestions --version 4.3.3

The updater uses Bun's built-in fetch to read published version metadata and theme.css, then regenerates src/generated-theme.js. It does not install the Tailwind package.

Press F5 in VS Code to open an Extension Development Host.

License

MIT. Copyright (c) 2026 Aleš Vaupotič.