Dynamic Tailwind classes in Stati

<% const color = stati.props?.color ?? 'blue'; %>
<span class="<%= stati.propValue('rounded', 'px-2', `bg-${color}-500`) %>">New</span>

// tailwind.config.js
export default {
  content: [
    './site/**/*.{md,eta,html}',
    './src/**/*.ts',
    // Every class stati.propValue() returned while the pages rendered
    './.stati/tailwind-classes.html',
  ],
};

Tailwind finds classes by reading your files, and bg-red-500 isn't in any of them when the template says `bg-${color}-500`. When Stati finds Tailwind in the project, it writes every class that stati.propValue() returns into .stati/tailwind-classes.html, and Tailwind reads it from there. It records what the pages actually rendered, so a colour no page uses stays out of the CSS.

The scripts, for Tailwind 3:

{
  "scripts": {
    "dev": "stati dev --tailwind-input src/styles.css --tailwind-output dist/styles.css",
    "build": "stati build && tailwindcss -i src/styles.css -o dist/styles.css --minify"
  }
}

The order in build matters: the pages render first, so the class list is complete by the time Tailwind runs. With the two flags, stati dev runs Tailwind's watcher in the same process.

In the Stati docs: Tailwind CSS integration, Dynamic Tailwind classes missing from the CSS and the dev server's Tailwind watcher.