create: scaffold's unlayered body styles defeat its own @layer base rules (and any shadcn theme)

生成された src/styles.css から始め、npx TanStack CLI create コマンドを使って問題を再現し、その後 shadcn preset を適用して npm run build を実行します。src/styles.css を create の scaffold template までさかのぼり、template の base rules と適用された preset が body の色とフォントを制御し、unlayered rules によって上書きされていないことを確認します。

Which project does this relate to?

Create Tanstack App

Describe the bug

The generated src/styles.css has an unlayered body rule that permanently defeats the @layer base { body { … } } rule further down in the same file.

@import 'tailwindcss' sets up @layer theme, base, components, utilities. Unlayered CSS outranks all layered CSS, so in a fresh scaffold:

/* line 166 — unlayered → wins */
body {
  margin: 0;
  color: var(--sea-ink);
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  background: radial-gradient(...);
}

/* line 339 — layered → can never take effect */
@layer base {
  body {
    background-color: var(--background);
    color: var(--foreground);
  }
}

The @layer base block is dead code as shipped — --background and --foreground never reach body.

This becomes a functional bug with the shadcn add-on. shadcn apply --preset <code> writes its theme into those same custom properties, so applying any preset from ui.shadcn.com/create has no visible effect:

• --background / --foreground lose to --bg-base / --sea-ink
• 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
• a { color: var(--lagoon-deep) } (line 208, unlayered) overrides the theme's link colour

The CLI prints "Preset applied successfully.", the values written are correct, and the build passes. The page just doesn't change. Reproduces with apply <code>, --only theme, and --only theme,font.

Your Example Website or App

N/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.

Steps to Reproduce the Bug or Issue

npx @tanstack/cli@latest create demo \
  --framework react --non-interactive --add-ons shadcn \
  --no-examples --package-manager npm --toolchain eslint --no-git --no-intent

cd demo

# any preset code from https://ui.shadcn.com/create
npx shadcn@latest apply --preset b5VsmmRNAG -y

npm run build
grep -o "body{[^}]*}" dist/client/assets/styles-*.css

Actual output — four body rules, the shadcn one first and losing to three unlayered ones:

body{background-color:var(--background);color:var(--foreground)}                 /* @layer base — loses */
body{color:var(--sea-ink);background-color:var(--bg-base);background:radial-…}   /* unlayered   — wins  */
body{background:radial-gradient(…)}                                             /* unlayered   — wins  */
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}                       /* unlayered           */

Visually: the page renders the scaffold's teal/green palette and Manrope, not the selected preset's palette and font.

Expected behavior

The @layer base rules the template itself ships should be able to take effect,
and an applied shadcn preset should govern the page's colours and font.

Concretely: after shadcn apply, body should resolve to the preset's
--background / --foreground, and the preset's font should apply — instead of
being silently overridden by the scaffold's own unlayered decorative rules.

Screenshots or Videos

No response

Platform

OS: macOS 27.0 (build 26A428), Darwin 27.0.0, arm64
Node: 24.14.1
npm: 11.16.0
@tanstack/cli: 0.71.0
@tanstack/create: 0.70.0
shadcn: 4.21.0
tailwindcss: 4.1.18
vite: 8.0.0
react: 19.2.0

Additional context

No response