Tailwind CSS for Nova

Tailwind CSS v4 support for Nova: hover previews, linting and class sorting from Tailwind's official language server (the same one behind VS Code's Tailwind extension), plus completions, color swatches and a reference sidebar.

Up to date with Tailwind v4.3. Works in HTML, PHP, Blade, ERB, Twig, Liquid, Pug/Jade, Markdown, Vue, Svelte, Astro, JavaScript/TypeScript (incl. JSX/TSX), and CSS/Sass/Scss files.

From Tailwind's language server (needs Node.js and npm, see below):

• Hover preview: hover a class to see its full CSS.
• Linting: conflicting classes, invalid @apply/variants/directives and more flagged as issues, with quick fixes.
• Sort classes into Tailwind's recommended order.

Built in (no Node.js needed):

• 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.
• Color swatches next to color classes in the editor, e.g. bg-red-500, text-sky-600/50.
• Sidebar shows all utility classes for quick reference, and can be filtered by class name or CSS property.
• 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 needs filesystem access, and hover preview and linting additionally need permission to run processes and make network requests (to install and run Tailwind's language server).

Hover preview

On by default. Turn it off for a project in Project → Project Settings → Tailwind → Enable hover preview.

• Needs Node.js and npm. The first time it runs, the extension installs Tailwind's official language server (@tailwindcss/language-server) via npm, which needs network access. It's installed into the extension's own storage, not your project.
• Nova only lets one language server provide hovers for each language. If a language already has a server with hover enabled, such as Nova's built-in HTML Language Server or CSS Language Server, Tailwind's hovers won't show. To fix it, open Nova → Settings → Languages, pick the language, click the ⓘ next to its existing language server, and turn off hover in its Features tab. That server keeps providing completions, diagnostics and the rest. Repeat for each language you want Tailwind hovers in, e.g. HTML and CSS.

Linting

On by default. Turn it per project in Project → Project Settings → Tailwind → Enable linting.

Tailwind problems show up in Nova's Issues sidebar and are underlined in the editor, with quick fixes where available (Editor → Show Code Actions). It uses Tailwind's own rules:

• Conflicting classes that set the same property, e.g. p-2 p-4 or flex block.
• Invalid @apply, variants, screens, @source, config paths and Tailwind directives.
• Variants in a non-standard order.
• Classes with a simpler canonical form, e.g. an arbitrary value that matches an existing class.
• Classes your project has blocklisted.

It uses the same language server as hover preview, so it has the same Node.js/npm requirement.

Sorting classes

Run Editor → Sort Tailwind Classes (also in the Command Palette) to put classes in Tailwind's recommended order (the same order Prettier's Tailwind plugin uses). With the cursor inside a class="…" attribute or an @apply statement it sorts that list; with a selection it sorts the selected classes; multiple cursors and selections work too. To sort every class list in the file at once, run Editor → Sort All Tailwind Classes in Document; it sorts all class/className attribute values and @apply statements in one step, which a single undo reverts. Template code ({{ }}, ${ }, <?php, …) is left where it is: only the classes before it are sorted, so px-6 flex {{gridCols}} becomes flex px-6 {{gridCols}}, and classes inside a {% if %} never move.

It uses the same language server as hover preview and linting, so one of those needs to be on (and Node.js installed).

Color swatches

On by default. Turn them off for a project in Project → Project Settings → Tailwind → Show color swatches. Swatches use your project's own colors when a theme entry file is set, and don't need Node.js.

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.3

Integrates Tailwind's official language server (@tailwindcss/language-server). This brings hover previews, linting, class sorting and editor color swatches.
Reorganised the documentation sidebar to mirror Tailwind's own documentation.
The extension now requires node.js and npm to install the language server. You may also need to turn off hover for Nova's built-in HTML/CSS Language Server for the hover previews to show.

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.