Tailwind CSS Completions For Nova

Autocompletion for Tailwind CSS v4 utility classes and variants in Nova.

• Up-to-date with Tailwind v4.3
• Completes utility classes (bg-, p-, flex, grid-cols-, …) with a live color swatch for color-scale utilities.
• Completes variants (hover:, md:, dark:, group-hover:, @lg:, …) and lets them stack (md:hover:bg-blue-500), replacing only the segment you're typing.
• Understands the negative-value prefix (-mt-4) for utilities that support it.
• Works in HTML, PHP, Blade, ERB, Twig, Liquid, Pug/Jade, Markdown, Vue, Svelte, Astro, JavaScript/TypeScript (incl. JSX/TSX), and CSS/Sass/Scss files.
• Sidebar shows all utility classes for quick reference
• Filter sidebar by CSS property of Tailwind class.
• Custom theme overrides by importing @theme/@utility from your CSS file.

Requirements

The default class/color/scale data is generated ahead of time from the tailwindcss npm package and shipped with the extension. Reading a project's own theme CSS requires the filesystem: readonly entitlement.

Updating for a new Tailwind release (untested)

The default color palette and scale values (spacing base, font sizes, breakpoints, border radii, blur sizes, etc.) live in Scripts/data/theme.generated.js, generated from the pinned tailwindcss version in gen/package.json. To pick up a new release:

cd gen
npm install
npm run generate

This overwrites Scripts/data/theme.generated.js. The utility name/pattern tables in Scripts/data/utilities.js and Scripts/data/variants.js are hand-maintained separately (Tailwind doesn't publish "which utilities exist" as data) and need manual updates if Tailwind adds, removes, or renames utilities/variants.

Version 1.2

Tailwind reference sidebar: browse every utility class and variant in a Category → Family → Class tree (Extensions → Tailwind), filterable by class name or CSS property (e.g. padding or letter-spacing — searching max height also matches max-height), with expand/collapse-all and insert-on-double-click. Stays in sync with your project's custom theme, same as completions. Right-click a class, variant, or family for "Open in Tailwind Docs" (links straight to the specific tailwindcss.com/docs page for that item), "Copy Class Name", or "Copy CSS".

Version 1.1

Custom theme support: point the extension at your project's Tailwind entry CSS file and it will read your @theme/@utility customizations — custom spacing, colors, and other scale overrides update completion hints to match, and custom @utility classes appear as completions too. An optional "Suppress default Tailwind colors" setting hides the default color palette entirely once you've defined your own.

Version 1.0

Tailwind CSS v4.3 utility and variant completions, with color swatches and stacked-variant support (md:hover:bg-blue-500). Class/color/scale data generated from the tailwindcss npm package rather than hand-transcribed.