{"id":19336087,"url":"https://github.com/ttempaa/esbuild-plugin-tailwindcss","last_synced_at":"2025-07-27T14:44:32.697Z","repository":{"id":65499660,"uuid":"591925200","full_name":"ttempaa/esbuild-plugin-tailwindcss","owner":"ttempaa","description":"Esbuild plugin for TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-02-10T00:15:16.000Z","size":72,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T05:52:06.545Z","etag":null,"topics":["css","esbuild","esbuild-plugin","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ttempaa.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-22T11:21:20.000Z","updated_at":"2025-03-20T17:54:12.000Z","dependencies_parsed_at":"2024-08-04T15:21:15.787Z","dependency_job_id":null,"html_url":"https://github.com/ttempaa/esbuild-plugin-tailwindcss","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"a48f017f0185578d94695bfcaead6067385e905e"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttempaa%2Fesbuild-plugin-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttempaa%2Fesbuild-plugin-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttempaa%2Fesbuild-plugin-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttempaa%2Fesbuild-plugin-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ttempaa","download_url":"https://codeload.github.com/ttempaa/esbuild-plugin-tailwindcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348365,"owners_count":21415894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","esbuild","esbuild-plugin","tailwindcss"],"created_at":"2024-11-10T03:09:47.000Z","updated_at":"2025-04-23T00:32:18.151Z","avatar_url":"https://github.com/ttempaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# esbuild-plugin-tailwindcss\n\nJust a [esbuild](https://esbuild.github.io/) plugin to simplify the connection of [TailwindCSS](https://tailwindcss.com).\n\n[![npm](https://img.shields.io/npm/v/esbuild-plugin-tailwindcss.svg)](https://www.npmjs.com/package/esbuild-plugin-tailwindcss)\n[![npm](https://img.shields.io/npm/dt/esbuild-plugin-tailwindcss.svg)](https://www.npmjs.com/package/esbuild-plugin-tailwindcss)\n[![npm](https://img.shields.io/npm/l/esbuild-plugin-tailwindcss.svg)](https://www.npmjs.com/package/esbuild-plugin-tailwindcss)\n\n\u003e [!NOTE]\n\u003e This version (2.x) works with TailwindCSS v4. If you need TailwindCSS v3, use the 1.x version of this plugin.\n\n## Install\n\n| Package manager | Command                                  |\n| --------------- | ---------------------------------------- |\n| npm             | `npm i -D esbuild-plugin-tailwindcss`    |\n| yarn            | `yarn add -D esbuild-plugin-tailwindcss` |\n| bun             | `bun add -d esbuild-plugin-tailwindcss`  |\n\n## Basic usage\n\n\u003e This module can be imported as ESM or CJS. The examples below use the ESM syntax.\n\nAdd plugin in build config:\n\n```js\nimport esbuild from 'esbuild';\nimport tailwindPlugin from 'esbuild-plugin-tailwindcss';\n\nesbuild.build({\n  entryPoints: ['src/index.js'],\n  outdir: 'dist',\n  bundle: true,\n  plugins: [\n    tailwindPlugin({ /* options */ }),\n  ],\n});\n```\n\nAdd the `@import \"tailwindcss\"` import to your main CSS file.\n\n```css\n/* index.css */\n@import 'tailwindcss';\n```\n\nImport `index.css` from your main `js`, `jsx`, `ts`, `tsx` file:\n\n```js\n/* index.js */\nimport './index.css';\n```\n\nDone, you can use the TailwindCSS in the project! \n\n## Options\n\n| Name                     | Type              | Default            | Description                                                                                                                                                          |\n| ------------------------ | ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `postcssPlugins.prepend` | `PostcssPlugin[]` | `[]`               | Adds custom PostCSS plugins **before** TailwindCSS processing.                                                                                                       |\n| `postcssPlugins.append`  | `PostcssPlugin[]` | `[]`               | Adds custom PostCSS plugins **after** TailwindCSS processing.                                                                                                        |\n| `cssModules.enabled`     | `boolean`         | `false`            | Enables CSS Modules support. When enabled, class names are locally scoped by default, meaning they are unique to the component and won't conflict with other styles. |\n| `cssModules.filter`      | `RegExp`          | `/\\.module\\.css$/` | A regular expression to detect which files should be processed as CSS Modules.                                                                                       |\n| `cssModules.exclude`     | `RegExp[]`        | `[]`               | An array of regular expressions to exclude specific files or paths from CSS Modules processing.                                                                      |\n\n## CSS Modules\n\nIf the `cssModules.enabled` option is `true`, you can use css modules with TailwindCSS. For example:\n\nFile `button.module.css`:\n\n```css\n.button {\n  @apply px-4 py-2 border-2 rounded;\n  background: #faf;\n}\n```\n\nFile `button.jsx`:\n\n```jsx\nimport styles from './button.module.css';\n\nexport const Button = ({ label }) =\u003e {\n  return \u003cbutton className={styles.button}\u003e{label}\u003c/button\u003e;\n};\n```\n\nTo make css modules work more correctly, add the main CSS file to the excludes:\n\n```js\ntailwindPlugin({\n  cssModules: {\n    enabled: true,\n    exclude: ['index.css']\n  }\n}),\n```\n\n## Type Definitions\n\nTo avoid TypeScript errors when importing CSS, add the types to your global declaration file:\n\n```ts\n/* globals.d.ts */\n\ndeclare module '*.module.css' {\n  const classes: Record\u003cstring, string\u003e;\n  export default classes;\n}\n```\n\n## Using with Bun\n\nSince Bun's bundler API is compatible with esbuild, this module can be used as a [Bun plugin](https://bun.sh/docs/bundler/plugins).\n\n```ts\nBun.build({\n  plugins: [\n    tailwindPlugin({ /* pass plugin options here */ }),\n  ]\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttempaa%2Fesbuild-plugin-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttempaa%2Fesbuild-plugin-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttempaa%2Fesbuild-plugin-tailwindcss/lists"}