Jannik
e5a9936066
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.
71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
// The result cards use a dynamic class `stagger-${index}` for the
|
|
// per-card animation delay. Tailwind's content scanner can't statically
|
|
// resolve that template literal, so without the safelist the four
|
|
// matching rules from src/index.css get purged from the build.
|
|
safelist: [{ pattern: /^stagger-[0-4]$/ }],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Dark mode (default) palette
|
|
bg: {
|
|
DEFAULT: "#080810",
|
|
card: "#111118",
|
|
hover: "#16161f",
|
|
},
|
|
// Light mode palette (applied via :root when not .dark)
|
|
bgLight: {
|
|
DEFAULT: "#f8fafc",
|
|
card: "#ffffff",
|
|
},
|
|
border: {
|
|
DEFAULT: "rgba(255, 255, 255, 0.06)",
|
|
},
|
|
borderLight: {
|
|
DEFAULT: "rgba(0, 0, 0, 0.08)",
|
|
},
|
|
accent: {
|
|
primary: "#7c3aed",
|
|
secondary: "#06b6d4",
|
|
secondaryLight: "#0891b2",
|
|
},
|
|
fg: {
|
|
DEFAULT: "#e2e8f0",
|
|
muted: "#64748b",
|
|
dark: "#0f172a",
|
|
},
|
|
tag: "#a78bfa",
|
|
},
|
|
animation: {
|
|
"gradient-shift": "gradient-shift 8s ease infinite",
|
|
"fade-up": "fade-up 300ms ease-out forwards",
|
|
"pulse-slow": "pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
},
|
|
keyframes: {
|
|
"gradient-shift": {
|
|
"0%, 100%": { backgroundPosition: "0% 50%" },
|
|
"50%": { backgroundPosition: "100% 50%" },
|
|
},
|
|
"fade-up": {
|
|
"0%": { opacity: "0", transform: "translateY(20px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
},
|
|
fontFamily: {
|
|
mono: [
|
|
"ui-monospace",
|
|
"SFMono-Regular",
|
|
"Menlo",
|
|
"Monaco",
|
|
"Consolas",
|
|
"monospace",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|