{"id":21274,"library":"esbuild-plugin-tailwindcss","title":"esbuild-plugin-tailwindcss","description":"esbuild plugin that integrates TailwindCSS into the build pipeline. Current stable version is 2.2.0, compatible with TailwindCSS v4. For TailwindCSS v3, use version 1.x. The plugin handles TailwindCSS processing via PostCSS, supports CSS Modules, custom PostCSS plugins, and Autoprefixer. It works with esbuild and Bun. Provides ESM and CJS exports with TypeScript type definitions.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/ttempaa/esbuild-plugin-tailwindcss","tags":["javascript","tailwindcss","esbuild","esbuild-plugin","bun","bun-plugin","plugin","typescript"],"install":[{"cmd":"npm install esbuild-plugin-tailwindcss","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-tailwindcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-tailwindcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the plugin requires TailwindCSS to be installed.","package":"tailwindcss","optional":false},{"reason":"Peer dependency; the plugin is used as an esbuild plugin.","package":"esbuild","optional":false}],"imports":[{"note":"Plugin is exported as default export. Both ESM and CJS are supported.","wrong":"const tailwindPlugin = require('esbuild-plugin-tailwindcss')","symbol":"default","correct":"import tailwindPlugin from 'esbuild-plugin-tailwindcss'"},{"note":"A named export 'tailwindPlugin' is also available, identical to default.","symbol":"tailwindPlugin (named)","correct":"import { tailwindPlugin } from 'esbuild-plugin-tailwindcss'"},{"note":"PluginOptions is a TypeScript type, use 'import type' for type-only imports.","wrong":"import { PluginOptions } from 'esbuild-plugin-tailwindcss'","symbol":"PluginOptions type","correct":"import type { PluginOptions } from 'esbuild-plugin-tailwindcss'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport tailwindPlugin from 'esbuild-plugin-tailwindcss';\n\nawait esbuild.build({\n  entryPoints: ['src/index.js'],\n  outdir: 'dist',\n  bundle: true,\n  plugins: [\n    tailwindPlugin({\n      postcssPlugins: {\n        prepend: [],\n        append: [],\n        disableAutoprefixer: false\n      },\n      cssModules: {\n        enabled: false\n      }\n    })\n  ]\n});","lang":"javascript","description":"Shows how to configure esbuild with the TailwindCSS plugin, including minimal options."},"warnings":[{"fix":"Use version 1.x for TailwindCSS v3: npm install esbuild-plugin-tailwindcss@^1.0.0","message":"Version 2.x requires TailwindCSS v4. Using with v3 will break.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use new option structure: { postcssPlugins: { ... }, cssModules: { ... } }","message":"The 'options' object in the main function call was deprecated in v2 in favor of nested postcssPlugins and cssModules.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use the plugin's event emitter to capture class name mappings.","message":"CSS Modules: 'getJSON' callback is managed internally by the plugin. To get class mappings, listen to the 'css-modules' event on the plugin instance.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Add @import \"tailwindcss\"; to your main CSS file.","message":"The @import \"tailwindcss\" statement must be in your CSS file; otherwise TailwindCSS is not processed.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure your CSS module files match the default /\\\\.module\\\\.css$/ pattern or adjust filter.","message":"When using CSS Modules, the plugin will not process files that match the exclude regex. Non-matching files are left as-is.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install tailwindcss: npm install -D tailwindcss","cause":"Peer dependency tailwindcss is not installed.","error":"Error: Cannot find module 'tailwindcss'"},{"fix":"Add @import \"tailwindcss\"; at the top of your main CSS file.","cause":"Missing TailwindCSS import in CSS file.","error":"Error: @import \"tailwindcss\" not found"},{"fix":"Use default import: import tailwindPlugin from 'esbuild-plugin-tailwindcss'","cause":"Attempted to use a named import incorrectly (e.g., import { tailwindPlugin } when using require).","error":"TypeError: plugin is not a function"},{"fix":"Create a tailwind.config.js or use TailwindCSS v4's new configuration approach (css-based).","cause":"TailwindCSS v4 expects a configuration file or proper setup; see TailwindCSS v4 migration.","error":"Error: PostCSS plugin tailwindcss requires Tailwind Config"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}