wsh-tailwind-static

name	wsh-tailwind-static
description	Replacing Tailwind CSS browser runtime with build-time CSS generation for WSH 2026. Covers @tailwindcss/browser removal, PostCSS or CLI integration, and Tailwind v4 config migration.

WSH: Tailwind Static CSS

The project loads @tailwindcss/browser@4.2.1 from CDN, which compiles Tailwind CSS at runtime in the browser. This is extremely slow — it parses all DOM elements and generates CSS on-the-fly.

Use this skill when replacing Tailwind browser runtime with build-time CSS generation.

Techniques

1. Remove CDN Script

<!-- Before (index.html) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
<style type="text/tailwindcss">
  @theme { ... }
</style>

<!-- After -->
<!-- Remove both the script tag and the style tag -->
<!-- CSS will be generated at build time -->

2. Install Tailwind CSS v4 for Build

Tailwind CSS v4 uses a new engine. For PostCSS integration:

pnpm add -D tailwindcss @tailwindcss/postcss

Then in postcss.config.js:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("@tailwindcss/postcss"),
    require("postcss-preset-env")({ stage: 3 }),
  ],
};

3. Move Theme Config to CSS

Tailwind v4 uses CSS-based configuration. The @theme block from the <style type="text/tailwindcss"> should move to the main CSS file:

/* index.css */
@import "tailwindcss";

@theme {
  --color-cax-canvas: #f5f5f0;
  --color-cax-text: #1a1a1a;
  /* ... other theme values ... */
}

4. Alternative: Tailwind CLI

If PostCSS plugin has issues, use the CLI directly:

npx @tailwindcss/cli -i src/index.css -o dist/styles/tailwind.css

Pitfalls

Pitfall	Symptom	Fix
Tailwind v4 PostCSS plugin not working with existing postcss-import	Duplicate @import processing	Ensure correct plugin order
Theme values missing	Colors/fonts don't apply	Copy all @theme values from inline style to CSS
type="text/tailwindcss" style block ignored at build time	Missing styles	Convert to standard CSS with @theme
Tailwind classes not scanned	Missing utility classes	Ensure content paths include all .tsx files

VRT Risks

Change	Visual Impact	Mitigation
Theme migration	Colors may differ if values wrong	Copy exact hex values from inline style
Missing utilities	Layout/spacing broken	Verify all used classes are generated
Plugin order change	CSS specificity issues	Test thoroughly

Project-Specific Notes

• CDN script in application/client/src/index.html
• Tailwind theme defines custom colors: cax-canvas, cax-text, cax-accent, etc.
• HtmlWebpackPlugin generates the HTML — inline styles need to be handled
• PostCSS config at application/client/postcss.config.js
• Current CSS entry: application/client/src/index.css