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?

[RobinMalfait]

Hey! I appreciate the PR but going to pass on this for now. Right now Lightning CSS is almost an implementation detail, and exposing some of its internal features makes it harder for us to switch tools later.

If you already use Vite, which you very likely are since you use @tailwindcss/vite, then they use Lightning CSS as well and you should be able to configure Lightning CSS that way (which you also hinted at in your comment).

The Polyfills feature is also used for internals right now, and allows us to hide polyfills for intellisense purposes (otherwise with the polyfills there is more noise). Since Lightning CSS runs later anyways, you will get these polyfills based on your configuration anyway so I don't think there is a good use case for exposing this information right now.

Are there any issues you were running into that required you to expose these polyfills? Feel free to open an issue if that's the case so we can see if this is the best solution for the problem you're experiencing.

Would love to keep the conversation going, but going to close this in the meantime since this PR is mainly focused around the Lightning CSS options which I don't think we should do right now.

Thanks!

[lubomirblazekcz]

@RobinMalfait

Yeah, I agree on the Lightning CSS options. I came to the same conclusion in my previous comment. As for the polyfills, that was the main thing I wanted to change. My reasoning is that even if I decide to turn off optimize and provide my own options via Vite, the polyfills are still included at compile time. I might want to target newer browsers where they aren’t needed, especially color-mix(), which adds a lot of additional code.

Should I create an issue for that? Is that something that makes sense to have configurable via Vite? I’m open to creating a PR just for that too :)