From e5a9936066f2c630459567e2888febba642674c6 Mon Sep 17 00:00:00 2001 From: orfelorfel23 Date: Wed, 3 Jun 2026 19:53:58 +0200 Subject: [PATCH] Fix CSS: add postcss config, safelist stagger-N, drop dead rules MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- package-lock.json | 4 +-- postcss.config.js | 11 ++++++++ src/index.css | 19 -------------- tailwind.config.js | 64 +++++++++++++++++++++++++++------------------- 4 files changed, 51 insertions(+), 47 deletions(-) create mode 100644 postcss.config.js diff --git a/package-lock.json b/package-lock.json index 44e944e..73da11b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "melodymuse", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "melodymuse", - "version": "0.1.0", + "version": "0.2.0", "dependencies": { "jszip": "^3.10.1", "lucide-react": "^0.451.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..f24ef63 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,11 @@ +// PostCSS config for Vite. Tells Vite to run Tailwind's JIT compiler and +// Autoprefixer on every CSS file it processes. Without this, Vite has no +// way of knowing which PostCSS plugins to apply, and the @tailwind +// directives in src/index.css would either be ignored or only partially +// processed (preflight + @apply but no utility classes). +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/index.css b/src/index.css index f2bc3de..4047bf7 100644 --- a/src/index.css +++ b/src/index.css @@ -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; diff --git a/tailwind.config.js b/tailwind.config.js index e12d116..ab11dee 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,56 +1,68 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./index.html', './src/**/*.{ts,tsx}'], - darkMode: 'class', + 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', + DEFAULT: "#080810", + card: "#111118", + hover: "#16161f", }, // Light mode palette (applied via :root when not .dark) bgLight: { - DEFAULT: '#f8fafc', - card: '#ffffff', + DEFAULT: "#f8fafc", + card: "#ffffff", }, border: { - DEFAULT: 'rgba(255, 255, 255, 0.06)', + DEFAULT: "rgba(255, 255, 255, 0.06)", }, borderLight: { - DEFAULT: 'rgba(0, 0, 0, 0.08)', + DEFAULT: "rgba(0, 0, 0, 0.08)", }, accent: { - primary: '#7c3aed', - secondary: '#06b6d4', - secondaryLight: '#0891b2', + primary: "#7c3aed", + secondary: "#06b6d4", + secondaryLight: "#0891b2", }, fg: { - DEFAULT: '#e2e8f0', - muted: '#64748b', - dark: '#0f172a', + DEFAULT: "#e2e8f0", + muted: "#64748b", + dark: "#0f172a", }, - tag: '#a78bfa', + 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', + "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%' }, + "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)' }, + "fade-up": { + "0%": { opacity: "0", transform: "translateY(20px)" }, + "100%": { opacity: "1", transform: "translateY(0)" }, }, }, fontFamily: { - mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'], + mono: [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "monospace", + ], }, }, },