Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta Para iniciantes
  • Algo errado?
#511 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
76/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
css, react, tailwindcss
Domínio
build-system, frontend, tooling

Direção de pesquisa

Comece com o src/styles.css gerado e reproduza o problema usando o comando npx TanStack CLI create; em seguida, aplique um preset shadcn e execute npm run build. Rastreie o src/styles.css de volta até o template do scaffold de create e verifique se as regras base do template e um preset aplicado controlam as cores e a fonte de body sem serem substituídos por regras não pertencentes a uma camada.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
1.3k
Forks
187
Merge médio
18h 45min
PRs com merge (30d)
2

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/cli

Todas as issues de TanStack/cli

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.