Fix CSS: add postcss config, safelist stagger-N, drop dead rules

The page was loading with effectively no Tailwind utility classes
because there was no postcss.config.js — Vite didn't know to run
Tailwind's PostCSS plugin. The preflight and @apply references in
src/index.css were partially working (because some Tailwind processing
was happening implicitly), but the JIT content scanner wasn't running,
so all utility classes (flex, grid, p-*, text-fg, bg-bg, …) were
missing from the build. The page rendered as unstyled HTML.

postcss.config.js — newly added. Tells Vite to run tailwindcss +
autoprefixer. Written in plain UTF-8 (the earlier draft saved as
UTF-16 with BOM, which Node couldn't parse, hence the 'Syntax Error'
in the file viewer).

tailwind.config.js — added a safelist for the dynamic
`stagger-${index}` classes used in ResultCard.tsx. The JIT
content scanner can't resolve a template literal, so without the
safelist the four matching rules (stagger-0 … stagger-4) got purged
from the build even though they're used at runtime. Adding them to
the safelist keeps them alive.

src/index.css — dropped three dead rules (card-hover, btn-primary,
gradient-bg-soft) that the modern UI redesign made unused. They
were in the file but never referenced by any .tsx, so the
content-aware purger was stripping them anyway; explicit removal
keeps the source honest.
This commit is contained in:
2026-06-03 19:53:58 +02:00
parent 9980d5ba20
commit e5a9936066
4 changed files with 51 additions and 47 deletions
-19
View File
@@ -40,16 +40,6 @@
@apply bg-bg-card border border-border rounded-2xl;
}
.card-hover {
@apply hover:bg-bg-hover transition-colors duration-150;
}
.btn-primary {
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
bg-accent-primary hover:bg-violet-500 active:bg-violet-700
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-secondary {
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
bg-bg-card border border-border text-fg hover:bg-bg-hover
@@ -91,15 +81,6 @@
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}
.gradient-bg-soft {
background: linear-gradient(
135deg,
rgba(124, 58, 237, 0.18) 0%,
rgba(6, 182, 212, 0.12) 50%,
rgba(8, 8, 16, 0) 100%
);
}
/* Stagger delays for the result cards' fade-up animation. */
.stagger-0 {
animation-delay: 0ms;