Skip to content

Fix UI serving: replace runtime CDN Tailwind with build-time CSS#6

Merged
lmangani merged 2 commits intomainfrom
copilot/fix-ui-styles-issues
Mar 7, 2026
Merged

Fix UI serving: replace runtime CDN Tailwind with build-time CSS#6
lmangani merged 2 commits intomainfrom
copilot/fix-ui-styles-issues

Conversation

Copy link
Contributor

Copilot AI commented Mar 7, 2026

The Express server's strict script-src 'self' CSP blocked the Tailwind CDN script and inline config, leaving the UI completely unstyled. A broken <link rel="stylesheet" href="/index.css"> (file never existed) caused the SPA fallback to return index.html as text/css, triggering a MIME-type rejection.

Changes

Tailwind: CDN → npm build-time

  • Added tailwindcss@^3, postcss, autoprefixer as devDependencies
  • tailwind.config.ts — theme config extracted from the old inline <script> block
  • postcss.config.js — wires Tailwind into Vite's PostCSS pipeline
  • index.css@tailwind directives + all custom CSS moved out of the <style> block; imported in index.tsx so Vite bundles it

index.html — stripped to minimal shell

Removed everything that was causing failures or was redundant after the Vite build:

  • <script src="https://cdn.tailwindcss.com"> and inline tailwind.config script
  • Inline <style> block (→ index.css)
  • <script type="importmap"> (unused — all deps are bundled by Vite)
  • Broken <link rel="stylesheet" href="/index.css"> (now a real bundled asset)

server/src/index.ts — CSP restored to strict; SPA fallback hardened

  • scriptSrc back to ["'self'"] — no CDN allowances or 'unsafe-inline' needed
  • SPA catch-all now skips requests with a file extension, returning a proper 404 instead of text/html for missing static assets

Result

Tailwind CSS is compiled into dist/assets/index-*.css (~91 kB) at build time — no CDN dependency, no CSP violations, works behind adblockers and firewalls.

UI with styles correctly applied


🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Co-authored-by: lmangani <1423657+lmangani@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix UI not being served correctly due to CSP issues Fix UI serving: replace runtime CDN Tailwind with build-time CSS Mar 7, 2026
@lmangani lmangani marked this pull request as ready for review March 7, 2026 16:25
@lmangani lmangani merged commit 6313cb0 into main Mar 7, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants