Add Vite support for configurable Lightning CSS options and polyfills

[lubomirblazekcz]

Summary

This updates the @tailwindcss/vite plugin so the optimize option can pass through additional Lightning CSS settings instead of only supporting minify. In addition to minify, Vite users can now configure drafts, nonStandard, include, exclude, and targets.

It also adds a polyfills option to the Vite plugin and threads that through to the Tailwind compiler, matching the behavior that already exists in the PostCSS and Webpack integrations. CSS Modules continue to disable the @property fallback polyfill so they do not emit global non-pure selectors.

While making this change, the Vite integration now only overrides minify when it is explicitly provided in optimize, which preserves Vite's existing build.cssMinify behavior when users only want to customize other Lightning CSS options.

Test plan

• pnpm vitest --root=./integrations run vite/index.test.ts -t "optimize option: disabled|optimize option: enabled with minify disabled|optimize option: advanced Lightning CSS settings|optimize option: advanced Lightning CSS exclude|polyfills option: disabled"

Screenshots not applicable; this change is covered by the Vite integration tests above.

[coderabbitai]

Walkthrough

These changes expand the Vite plugin's configuration capabilities by introducing support for granular Lightning CSS settings and polyfill control. The OptimizeOptions interface now accepts targets, include, exclude, drafts, and nonStandard properties. The Vite plugin's PluginOptions type adds a polyfills option (defaulting to Polyfills.All) and refines how optimization settings are processed. CSS Modules receive conditional polyfill masking to exclude Polyfills.AtProperty. Documentation and test coverage have been added to demonstrate the new configuration patterns.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: adding Vite support for configurable Lightning CSS options and polyfills, which aligns with the core objectives across all modified files.
Description check	✅ Passed	The description provides detailed context about the changes, including what was added (polyfills option), how it relates to other integrations, CSS Modules handling, and minify behavior preservation, all directly related to the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/`@tailwindcss-vite/README.md:
- Around line 80-82: Add a short caveat to the "Controlling Tailwind polyfills"
section clarifying that although Tailwind emits supported polyfills by default,
this Vite adapter masks the Polyfills.AtProperty for .module.css files to avoid
introducing global/non-pure selectors; reference the polyfills option and
Polyfills.AtProperty so readers know this is an intentional Vite-specific
exception and not a bug in Tailwind.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fd6d4611-67fc-4c2f-b347-15d2aff136de

📥 Commits

Reviewing files that changed from the base of the PR and between 5a835e1 and 46244ed.

📒 Files selected for processing (4)

• integrations/vite/index.test.ts
• packages/@tailwindcss-node/src/optimize.ts
• packages/@tailwindcss-vite/README.md
• packages/@tailwindcss-vite/src/index.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Mention the CSS Modules polyfill exception.

Line 82 says Tailwind emits all supported polyfills by default, but the Vite implementation masks Polyfills.AtProperty for .module.css files to avoid global non-pure selectors. A short caveat here would keep the docs aligned with the implementation.

📝 Proposed wording

-By default, Tailwind emits all supported CSS polyfills. You can customize this behavior using the `polyfills` option:
+By default, Tailwind emits all supported CSS polyfills. In Vite CSS Modules, the `@property` fallback polyfill is still suppressed because it emits global selectors. You can customize this behavior using the `polyfills` option:

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	## Controlling Tailwind polyfills
	By default, Tailwind emits all supported CSS polyfills. You can customize this behavior using the `polyfills` option:
	## Controlling Tailwind polyfills
	By default, Tailwind emits all supported CSS polyfills. In Vite CSS Modules, the `@property` fallback polyfill is still suppressed because it emits global selectors. You can customize this behavior using the `polyfills` option:

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/`@tailwindcss-vite/README.md around lines 80 - 82, Add a short
caveat to the "Controlling Tailwind polyfills" section clarifying that although
Tailwind emits supported polyfills by default, this Vite adapter masks the
Polyfills.AtProperty for .module.css files to avoid introducing global/non-pure
selectors; reference the polyfills option and Polyfills.AtProperty so readers
know this is an intentional Vite-specific exception and not a bug in Tailwind.

[lubomirblazekcz]

I'm considering removing the additional Lightning CSS options as setting from this PR. Setting optimize: false and leaving the rest to vite lightningcss perhaps makes more sense. I've added that primarily because of when someone has different targets in vite configuration.

But I think ability to configuring polyfills would be neat. Thoughts?