esbuild-plugin-tailwindcss v1.2.0

esbuild-plugin-tailwindcss

Just a module to simplify the connection of TailwindCSS

Install

yarn add -D esbuild-plugin-tailwindcss

or

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

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

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']
}),