Registry / web-framework / tailwindcss-vite-plugin

tailwindcss-vite-plugin

library0.0.7jsnpmunverified

A Vite plugin that integrates Tailwind CSS with the browser's DevTools for a visual design experience. Current stable version is 0.0.7. The plugin allows editing Tailwind classes directly in Chrome/Firefox DevTools, providing instant feedback. It automatically injects @tailwind directives and supports custom entry points. Released under MIT, it is actively maintained but still in early development. Alternatives include @tailwindcss/vite (official) and PostCSS-based setups; this plugin differentiates by focusing on DevTools integration.

web-framework devops

npm install tailwindcss-vite-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · TAILWINDCSS-VITE-P

tailwindcss-vite-plugin

web-frameworkjavascriptv0.0.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TailwindCSSVitePlugin

✓ import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

✗ const TailwindCSSVitePlugin = require('tailwindcss-vite-plugin')

ESM-only; TypeScript types included. If using CommonJS, use dynamic import() or switch to ESM.

TailwindCSSVitePlugin

✓ import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

✗ import TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'

Default export is not provided; must use named import.

TailwindCSSVitePlugin as default

✓ import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

✗ import * as TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'

Only named export exists; no namespace or default.

Shows how to add the TailwindCSSVitePlugin to a Vite project with React, enabling Tailwind DevTools integration.

// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'; export default defineConfig({ plugins: [ react(), TailwindCSSVitePlugin(), ], });

Debug

Known issues

gotchaWhen using custom entry (entry option), you must manually import '_tailwind-devtools_.js' in your code.

fix

Add import '_tailwind-devtools_.js' to your main entry file (e.g., App.tsx).

affects: >=0.0.0

breakingVersion 0.0.7 may have breaking changes from 0.0.6; check changelog.

fix

Review GitHub releases for migration steps.

affects: >=0.0.7

Errors

Common errors & fixes

ERROR: Cannot find module 'tailwindcss-vite-plugin'

Package not installed or missing from node_modules.

fix

Run 'npm install --save-dev tailwindcss-vite-plugin' or 'pnpm add -D tailwindcss-vite-plugin'.

TypeError: TailwindCSSVitePlugin is not a function

Incorrect import (default instead of named) or using require() in ESM context.

fix

Use 'import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin''.

Upgrade

Version history

0.0.7latest on npm

Audit

Dependencies

viterequiredpeer dependency; required to use the plugin

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/await-ovo/tailwindcss-webpack-plugin ↗

packagehttps://www.npmjs.com/package/tailwindcss-vite-plugin ↗