Vite Plugin Tailwind

0.0.4 verified Mon Apr 27 auth: no javascript abandoned

A Vite plugin that integrates Tailwind CSS with JIT (Just-In-Time) compiler enabled by default. Current version 0.0.4 is a very early alpha, released infrequently, with minimal documentation and no tests. Zero-config setup similar to WindiCSS plugin but for Tailwind. Includes a config viewer at `/_tailwind/`. Not yet production-ready; alternatives like `@tailwindcss/vite` (official) are more stable.

Common errors

error Cannot find module 'tailwindcss' ↓

cause Missing required peer dependency tailwindcss.

fix

Run npm install tailwindcss --save-dev.

error [vite] Internal server error: The `purge`/`content` options are required for JIT mode. ↓

cause No `content` or `purge` paths defined in tailwind.config.js.

fix

Add content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'] to tailwind.config.js.

error TypeError: tailwind is not a function ↓

cause Incorrect import (named instead of default).

fix

Use import tailwind from 'vite-plugin-tailwind' instead of import { tailwind } ....

Warnings

gotcha Plugin is in very early alpha (0.0.4), no tests, and no recent updates. Consider using official `@tailwindcss/vite` plugin instead. ↓

fix Replace with `@tailwindcss/vite` from Tailwind CSS or use `tailwindcss` standalone with PostCSS.

deprecated The JIT mode is enabled by default but requires a `tailwind.config.js` with `purge` or `content` paths; omitting them may cause unexpected missing styles. ↓

fix Create a valid `tailwind.config.js` with `content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']`.

gotcha Config viewer at `/_tailwind/` may not work correctly; plugin is unpolished. ↓

fix Avoid relying on the viewer; check Tailwind output directly.

Install

npm install vite-plugin-tailwind

yarn add vite-plugin-tailwind

pnpm add vite-plugin-tailwind

Imports

default

wrong

import { tailwind } from 'vite-plugin-tailwind'

correct

import tailwind from 'vite-plugin-tailwind'

Default export only; named export does not exist.

Plugin (type)
```
import type { Plugin } from 'vite'
```
No types exported from this package; use Vite's Plugin type if needed.

CommonJS require

wrong

const { tailwind } = require('vite-plugin-tailwind');

correct

const tailwind = require('vite-plugin-tailwind');

Only default export, so named destructuring fails.

Quickstart

Minimal setup to add Tailwind CSS with JIT mode in a Vite project using this plugin.

import { defineConfig } from 'vite';
import tailwind from 'vite-plugin-tailwind';

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

// Then create tailwind.config.js with purge/content paths.
// Ensure tailwindcss is installed as a peer dependency.