Skip to content

Process stylesheets that only use @theme in @tailwindcss/vite - #20599

Open
mkantautas wants to merge 2 commits into
tailwindlabs:mainfrom
mkantautas:fix/vite-theme-only-entry
Open

mkantautas wants to merge 2 commits into
tailwindlabs:mainfrom
mkantautas:fix/vite-theme-only-entry

Conversation

@mkantautas

Copy link
Copy Markdown

Summary

@tailwindcss/vite only hands a stylesheet to Tailwind when it uses @apply, @plugin/@config, theme(…), @tailwind utilities or @variant. A stylesheet that only uses @theme is returned as-is:

/* src/theme.css, linked from index.html */
@theme {
  --color-brand: red;
}

.brand {
  color: var(--color-brand);
}

vite build emits this file unchanged, so the browser gets the raw @theme block and --color-brand is never defined. Compiling the same CSS with tailwindcss directly (or with @tailwindcss/postcss) gives :root, :host { --color-brand: red; } and the .brand rule.

Features.AtTheme was added in #18979 for this case, but the Vite plugin's check wasn't updated. This adds Features.AtTheme to it.

Test plan

  • Added production build with a stylesheet that only uses @theme to integrations/vite/index.test.ts. On main it fails because the CSS still contains the @theme { … } block; with this change the output has the :root, :host declaration and the .brand rule.
  • pnpm vitest --root=./integrations run vite/index.test.ts -t 'only uses|production build|demote': 4 passed.
  • prettier --check on the changed files.

@mkantautas
mkantautas requested a review from a team as a code owner October 20, 2026 15:45
@coderabbitai

coderabbitai Bot commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: b08e7a6d-fd49-4817-87da-f950da407f35
📥 Commits

Reviewing files that changed from the base of the PR and between 8cc0551 and 6986fb2.

📒 Files selected for processing: 3
  • CHANGELOG.md
  • integrations/vite/index.test.ts
  • packages/@tailwindcss-vite/src/index.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

Walkthrough

Root.generate now continues CSS generation when the compiler feature mask includes Features.AtTheme. A Vite production-build test checks that a theme-only stylesheet produces the expected custom property and preserves its variable reference. The changelog records the change.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to 6986f

The change is ready to merge after normal checks; no actionable issue was identified.

Pre-merge checks: Passed 4
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: processing stylesheets that use only @theme in @tailwindcss/vite.
Description check Passed The description is directly related to the changeset. It explains the @theme processing issue, the code change, and the added integration test.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@greptile-apps

greptile-apps Bot commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerView in GreptileConfidence Score: 5/5

[Medium impact] This PR appears safe to merge.

Reviews (1) · Last reviewed commit: "Add changelog entry for #20599" · Reviewed by Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant