static_

Tailwind & dark mode

styles/main.css containing @import "tailwindcss"; is compiled with Tailwind 4 (CSS-first: @theme, @utility, @plugin, @custom-variant; there is no config file). Your pages, components, layouts, content, data and the CLI's built-in components are scanned automatically. Any other stylesheet is passed through, minified in production. The CSS file is fingerprinted (styles.<hash>.css) and cached immutably.

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-brand: #c2420d;   /* bg-brand, text-brand ... */
}

Only Tailwind 4 is supported. Tailwind 3 @tailwind base; files are passed through as plain CSS without processing.

Dark mode

  1. Add the @custom-variant dark line above.
  2. Use dark: classes: class="bg-white dark:bg-zinc-950".
  3. Put <ThemeToggle /> anywhere (typically the layout).

The saved or OS preference is applied before first paint by a tiny inline script that Static adds automatically whenever a toggle is on the page, so there is no flash of the wrong theme. The choice is stored in localStorage.theme.

With no saved choice a first-time visitor gets the OS preference. To start everyone in light (or dark) mode instead, set defaultTheme in data/site.json:

{ "defaultTheme": "light" }

Values are "light", "dark" and "system" (the default). It only changes the starting theme: once a visitor uses the toggle, their choice is remembered and wins. Use themeColor and themeColorDark in site.json for the browser UI colour.