René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"create: scaffold's unlayered body styles defeat its own @layer base rules (and any shadcn theme)","articleBody":"### Which project does this relate to?\n\nCreate Tanstack App\n\n### Describe the bug\n\nThe generated `src/styles.css` has an unlayered `body` rule that permanently defeats the `@layer base { body { … } }` rule further down in the same file.\n\n`@import 'tailwindcss'` sets up `@layer theme, base, components, utilities`. Unlayered CSS outranks all layered CSS, so in a fresh scaffold:\n\n```css\n/* line 166 — unlayered → wins */\nbody {\n  margin: 0;\n  color: var(--sea-ink);\n  font-family: var(--font-sans);\n  background-color: var(--bg-base);\n  background: radial-gradient(...);\n}\n\n/* line 339 — layered → can never take effect */\n@layer base {\n  body {\n    background-color: var(--background);\n    color: var(--foreground);\n  }\n}\n```\n\nThe `@layer base` block is dead code as shipped — `--background` and `--foreground` never reach `body`.\n\nThis becomes a functional bug with the shadcn add-on. `shadcn apply --preset \u003ccode>` writes its theme into those same custom properties, so applying any preset from ui.shadcn.com/create has no visible effect:\n\n- `--background` / `--foreground` lose to `--bg-base` / `--sea-ink`\n- the preset's font loses too — presets emit `@layer base { html { @apply font-serif } }`, which the unlayered `body { font-family: var(--font-sans) }` (line 169) overrides\n- `a { color: var(--lagoon-deep) }` (line 208, unlayered) overrides the theme's link colour\n\nThe CLI prints \"Preset applied successfully.\", the values written are correct, and the build passes. The page just doesn't change. Reproduces with `apply \u003ccode>`, `--only theme`, and `--only theme,font`.\n\n### Your Example Website or App\n\nN/A — this is a `create` scaffolding bug. It happens when the project is generated, so there's no app to link. See Steps to Reproduce.\n\n### Steps to Reproduce the Bug or Issue\n\n```bash\nnpx @tanstack/cli@latest create demo \\\n  --framework react --non-interactive --add-ons shadcn \\\n  --no-examples --package-manager npm --toolchain eslint --no-git --no-intent\n\ncd demo\n\n# any preset code from https://ui.shadcn.com/create\nnpx shadcn@latest apply --preset b5VsmmRNAG -y\n\nnpm run build\ngrep -o \"body{[^}]*}\" dist/client/assets/styles-*.css\n```\n\nActual output — four `body` rules, the shadcn one first and losing to three unlayered ones:\n\n```css\nbody{background-color:var(--background);color:var(--foreground)}                 /* @layer base — loses */\nbody{color:var(--sea-ink);background-color:var(--bg-base);background:radial-…}   /* unlayered   — wins  */\nbody{background:radial-gradient(…)}                                             /* unlayered   — wins  */\nbody{-webkit-font-smoothing:antialiased;overflow-x:hidden}                       /* unlayered           */\n```\n\nVisually: the page renders the scaffold's teal/green palette and Manrope, not the selected preset's palette and font.\n\n### Expected behavior\n\nThe `@layer base` rules the template itself ships should be able to take effect,\nand an applied shadcn preset should govern the page's colours and font.\n\nConcretely: after `shadcn apply`, `body` should resolve to the preset's\n`--background` / `--foreground`, and the preset's font should apply — instead of\nbeing silently overridden by the scaffold's own unlayered decorative rules.\n\n### Screenshots or Videos\n\n_No response_\n\n### Platform\n\nOS: macOS 27.0 (build 26A428), Darwin 27.0.0, arm64\nNode: 24.14.1\nnpm: 11.16.0\n@tanstack/cli: 0.71.0\n@tanstack/create: 0.70.0\nshadcn: 4.21.0\ntailwindcss: 4.1.18\nvite: 8.0.0\nreact: 19.2.0\n\n### Additional context\n\n_No response_","author":{"url":"https://github.com/mishucodes","@type":"Person","name":"mishucodes"},"datePublished":"2026-09-16T19:47:15Z","url":"https://github.com/TanStack/cli/issues/511"}