cat/Kanban
Private
Public Access
1
0
Fork 0
Code Activity

Fix branding not applying: move CSS vars out of @theme, inject after Tailwind

Browse Source 
Tailwind v4's @theme block outputs CSS that came after the tenant theme
<style> tag, causing the defaults to win by source order. Two fixes:
- Move custom property defaults from @theme {} to :root {} so they're
  at the same cascade level as tenant overrides
- Inject tenant CSS before </head> instead of after <head> so it comes
  after all Tailwind output in the cascade

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-27 12:46:15 -05:00
parent 986c88143a
commit 95ec8f30dd
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+1 -1
View File
@@ -2,7 +2,7 @@
@custom-variant dark (&:where(.dark, .dark *));
@theme {
:root {
--color-board-bg: #f1f2f4;
--color-page-bg: #f9fafb;
--color-nav-bg: #0079bf;
src/hooks.server.ts
+1 -1
View File
@@ -63,7 +63,7 @@ export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
transformPageChunk: tenantCSS
? ({ html }) => html.replace('<head>', `<head>${tenantCSS}`)
? ({ html }) => html.replace('</head>', `${tenantCSS}</head>`)
: undefined
});