esbuild-plugin-tailwind

0.1.0 verified Fri May 01 auth: no javascript

Unofficial Tailwind CSS plugin for esbuild (v0.1.0). Integrates Tailwind CSS generation into esbuild's build pipeline. Custom Tailwind config, inline sourcemaps, and CSS loader options. Lightweight alternative to PostCSS-based setups. No active release cadence; single version published.

Common errors

error Error: Cannot find module 'tailwindcss' ↓

cause Missing peer dependency tailwindcss.

fix

Run npm install -D tailwindcss

error TypeError: tailwind is not a function ↓

cause Using named import instead of default import.

fix

Use import tailwind from 'esbuild-plugin-tailwind'

Warnings

gotcha Plugin version v0.1.0 is the only release; no maintenance guarantee. ↓

fix Consider using official Tailwind CSS PostCSS plugin or @tailwindcss/vite for long-term support.

breaking Plugin may require specific esbuild version (>=0.8) but not enforced. ↓

fix Ensure esbuild is at least 0.8.x.

gotcha Inline sourcemaps option defaults to false; enabling may affect build performance. ↓

fix Set inlineSourcemap: true only for development builds.

gotcha Loader option defaults to 'css', not 'text'. Using 'text' may break CSS processing. ↓

fix Use loader: 'css' for standard CSS output.

Install

npm install esbuild-plugin-tailwind

yarn add esbuild-plugin-tailwind

pnpm add esbuild-plugin-tailwind

Imports

default

wrong

const tailwind = require('esbuild-plugin-tailwind')

correct

import tailwind from 'esbuild-plugin-tailwind'

ESM-only package, no CommonJS export.

tailwind

wrong

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

correct

import tailwind from 'esbuild-plugin-tailwind'

Package exports a default function.

Quickstart

Demonstrates basic usage of the esbuild-plugin-tailwind plugin with a custom Tailwind config.

import esbuild from 'esbuild'
import tailwind from 'esbuild-plugin-tailwind'

await esbuild.build({
  entryPoints: ['src/app.js'],
  bundle: true,
  outfile: 'dist/out.js',
  plugins: [
    tailwind({
      config: { theme: { extend: { colors: { brand: '#1c64f2' } } } },
      inlineSourcemap: false,
      loader: 'css'
    })
  ]
})