vite-plugin-tailwind-polyfill

A opinionated Vite plugin that derives legacy-browser CSS from the final Tailwind CSS 4 output.

Minimum browser targets: Chrome and Edge 85, Firefox 80, Safari 14.1, and iOS 14.5

Quick Start

pnpm add -D vite-plugin-tailwind-polyfill

Add plugin to vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tailwindPolyfill from "vite-plugin-tailwind-polyfill";

export default defineConfig({
  plugins: [tailwindcss(), tailwindPolyfill()],
});

How it works

During a Vite application build, the plugin:

1. Reads the final CSS assets generated by Vite and Tailwind CSS 4.
2. Flattens cascade layers, lowers registered properties and precompute common variable-based opacity colors.
3. Uses Lightning CSS to lower supported syntax for Chrome and Edge 85, Firefox 80, Safari 14.1, and iOS 14.5.
4. Emit polyfilled stylesheets and injects mutually exclusive polyfill/modern switching into each HTML entry.

Tailwind CSS 4 remains the only Tailwind compiler. shadcn, tw-animate-css, themes, plugins and custom variants are supported as ordinary imported CSS; none are required by this plugin.

When polyfill CSS is active, matching modern stylesheets are disabled, including stylesheets loaded later by dynamic imports. SSR and library builds are skipped.

Limitations

• IE11 is not supported.
• This is progressive enhancement, not a complete modern CSS polyfill.
• Removal of cascade layers can change precedence of layered stylesheets.

Development

pnpm lint
pnpm format
pnpm typecheck
pnpm build

License

MIT