rollup-plugin-tailwindcss

1.0.0 verified Mon Apr 27 auth: no javascript deprecated

Rollup plugin that bundles a Tailwind CSS stylesheet as a Rollup asset, supporting tree-shaking via purge options. Current version 1.0.0, last updated in 2020. Low release cadence. Key differentiator: minimal configuration for integrating Tailwind CSS with Rollup-based builds, unlike full Webpack setups.

Common errors

error Error: Cannot find module 'tailwindcss' ↓

cause tailwindcss not installed as peer dependency

fix

npm install tailwindcss --save-dev

error SyntaxError: Unexpected token 'export' ↓

cause ESM import used in CommonJS environment

fix

Use import syntax in .mjs file or configure Rollup to handle ESM

error Error: No input file specified. Use the 'input' option. ↓

cause Missing 'input' option in plugin config

fix

Add input: 'path/to/your.css' to the plugin options

error TypeError: Cannot destructure property 'tailwind' of ... undefined ↓

cause Incorrect named import instead of default

fix

Use import tailwind from 'rollup-plugin-tailwindcss' (not { tailwind })

Warnings

deprecated This plugin has not been updated for Tailwind CSS v2+ and is no longer maintained. ↓

fix Switch to '@tailwindcss/rollup-plugin' or use PostCSS with rollup-plugin-postcss

breaking Purge configuration is incompatible with Tailwind CSS v2.0.0's built-in purge ↓

fix Use Tailwind CSS v1 or migrate to v2 and use tailwindcss/rollup-plugin

gotcha The plugin only handles a single CSS entry; multiple entry points are not supported ↓

fix Use separate plugin instances for each entry or combine stylesheets beforehand

Install

npm install rollup-plugin-tailwindcss

yarn add rollup-plugin-tailwindcss

pnpm add rollup-plugin-tailwindcss

Imports

default

wrong

const tailwind = require('rollup-plugin-tailwindcss')

correct

import tailwind from 'rollup-plugin-tailwindcss'

ESM-only; no CommonJS exports

tailwind

wrong

import tailwind from 'rollup-plugin-tailwindcss'

correct

import { tailwind } from 'rollup-plugin-tailwindcss'

Named export is not available, only default export works

PluginOptions
```
import type { PluginOptions } from 'rollup-plugin-tailwindcss'
```
TypeScript type; only available in v1.0.0+ (no types in earlier versions)

Quickstart

Minimal Rollup config using the plugin with purge. Replace 'src/tailwind.css' and content paths as needed.

// rollup.config.js
import tailwind from 'rollup-plugin-tailwindcss';

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'esm' },
  plugins: [
    tailwind({
      input: 'src/tailwind.css',
      purge: {
        enabled: true,
        content: ['./src/**/*.js'],
        options: { defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [] }
      }
    })
  ]
};