wxt-tailwindcss-module

A WXT module that adds Tailwind CSS v4 to WXT's Vite build pipeline with a zero-config setup inspired by @nuxtjs/tailwindcss.

Installation

pnpm add -D wxt-tailwindcss-module tailwindcss @tailwindcss/vite

Then enable the module in wxt.config.ts:

import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['wxt-tailwindcss-module'],
});

That's it. You no longer need to create a CSS file or import @import "tailwindcss" manually. The module generates the Tailwind stylesheet and injects it through WXT's module/plugin pipeline.

You can immediately use classes in your entrypoints:

document.querySelector('#app')!.innerHTML = `
  <div class="rounded-xl bg-slate-900 p-6 text-white shadow-xl">
    <h1 class="text-2xl font-bold">Hello Tailwind</h1>
  </div>
`;

Options

export default defineConfig({
  modules: ['wxt-tailwindcss-module'],
  tailwindcss: {
    enabled: true,
    vite: {
      optimize: false,
    },
  },
});

• enabled defaults to true.
• vite is forwarded directly to @tailwindcss/vite.

How it works

WXT already uses Vite, so the module follows WXT's own module architecture and the same general strategy used by WXT's official UnoCSS module: defineWxtModule() plus addViteConfig(). The Tailwind Vite plugin is installed into WXT's Vite configuration. fileciteturn2file0

The module also generates a small runtime plugin and a Tailwind CSS entrypoint. WXT's runtime plugin loader makes those plugins available to JS and HTML entrypoints, allowing Tailwind to be available without requiring an explicit CSS import in every entrypoint. fileciteturn27file0

The generated stylesheet uses Tailwind v4's source directive so Tailwind scans the extension project for utility classes.

Build tooling

The package itself uses tsdown, not Vite, for library bundling and declaration generation. This matches WXT's current package convention: WXT's official UnoCSS package is built with tsdown, and this repository already uses tsdown.config.ts. fileciteturn6file0 fileciteturn15file0

Vite is used only at consumer/build time through WXT, where @tailwindcss/vite runs as the Tailwind integration plugin.

Compatibility

• WXT >= 0.21.0
• Tailwind CSS >= 4.0.0

License

MIT