Just a module to simplify the connection of TailwindCSS
yarn add -D esbuild-plugin-tailwindcss
or
npm i -D esbuild-plugin-tailwindcss
* 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!
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 |
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:
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 |
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']
}),