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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user