esbuild-plugin-tailwindcss

Just a module to simplify the connection of TailwindCSS

Install

yarn add -D esbuild-plugin-tailwindcss

npm i -D esbuild-plugin-tailwindcss

Basic usage

* This module can be imported as ESM or CJS. The examples below use the ESM syntax.

Add plugin in build config:

import { tailwindPlugin } from 'esbuild-plugin-tailwindcss';

esbuild.build({
  plugins: [
    tailwindPlugin({
      // options
    }),
  ],
});

Create file tailwind.config.js at the root of the project:

export default {
  content: ['./source/**/*.{js,jsx,ts,tsx}'],
  // ...
  // The rest of the tailwindcss configuration
  // For more, see: https://tailwindcss.com/docs/configuration
};

Create file index.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import index.css from index.{js,jsx,ts,tsx} file:

import './index.css';

Done, you can use the TailwindCSS in the project!

Options

Name	Type	Default	Description
configPath	string	tailwind.config.js	Indicates the custom location of the TailwindCSS config
postcssPlugins	(PostcssPlugin \| PostcssPluginConfig)[]	[]	Adds custom plugins to the postcss handler
cssModulesEnabled	boolean	false	Enables processing of css modules
cssModulesFilter	RegExp	/\.module\.css$/	Sets a template for detecting css modules
cssModulesExcludePaths	RegExp[]	[]	Sets paths and files that should not be processing as css modules

PostCSS plugins

Tailwind and autoprefixer are already used by default. Other plugins can be used as plain imports (e.g. require("postcss-import")) or as a config object. Plugins are appended by default, but you can choose to prepend them based on your use case using the config object:

Plugin config object

Name	Type	Default	Description
plugin	PostcssPlugin	-	Mandatory. The plugin itself, for example `require("postcss-import")`
prepend	boolean	false	Prepends the plugin instead of appending it after tailwind and autoprefixer

CSS Modules

If the cssModulesEnabled option is true, you can use css modules with TailwindCSS. For example:

File button.module.css:

.button {
  @apply px-4 px-2 border-2 rounded;
  background: #faf;
}

File button.jsx:

import styles from './button.module.css';

export const Button = ({ label }) => {
  return <button className={styles.button}>{label}</button>;
};

Note: to make css modules work more correctly, add the index.css file (or any of your css file where you use: @import "tailwind/*") to the cssModulesExcludePaths option:

tailwindPlugin({
  cssModulesExcludePaths: ['index.css']
}),