CSS-first configuration — Nakshora 3.1 configuration

ConfigurationNakshora 3.1Updated 2026-09-152 tags

@theme, @utility and @custom-variant — Tailwind-v4-style config written in your stylesheet. Complete reference for this Nakshora 3.1 configuration option: types, defaults, examples and pitfalls.

CSS-first configuration — Nakshora 3.1 configuration — Nakshora Docs — Configuration · Nakshora Docs editorial library

@theme, @utility and @custom-variant — Tailwind-v4-style config written in your stylesheet.

Syntax#

nakshora.config.js

js

/* app.css — Tailwind-v4-style CSS config */
@theme {
  --color-brand-500: #6d28d9;
}

@utility tab-4 {
  tab-size: 4;
}

@custom-variant hocus (&:hover, &:focus);

Details & defaults#

New in 3.1: write configuration in the stylesheet itself. @theme defines tokens as CSS variables, @utility registers custom utilities, @custom-variant creates new variants. It composes with — never replaces — the JS config.

Worked examples#

Define --color-brand-* once in CSS, use bg-brand-500 everywhere
Create a hocus variant for hover+focus in one declaration

See the configuration/index|configuration hub for the full option table, and api/theme-resolution|theme resolution for how options merge.

#configuration #css-first