A few days ago I wrote about the config-driven Astro + Tailwind 4 template I use for small-business sites. Gautam K left a great comment under it. Roughly: "Your brand colours are injected with an inline style on <html> , which breaks under a strict CSP. Emit them as a stylesheet from an endpoint instead, and put a performance budget in the build." In a follow-up he added a caching tip: if the file name isn't hashed, keep its cache short.

He was right on both counts, so v1.1 does exactly that. Here's the whole change. It's small, and you can copy it into any Astro site.

The problem: theming via style=""

v1.0 read the colours from src/data/site.ts and did this in the layout:

--- const t = site.theme; const brandVars = `--brand-primary:${t.primary};--brand-accent:${t.accent};`; --- <html lang="en" style={brandVars}>

Enter fullscreen mode

Exit fullscreen mode

It's convenient, but a policy like style-src 'self' (no 'unsafe-inline' ) blocks inline style attributes.…