# esbuild

Source: https://plumeria.dev/docs/integration/esbuild





[`examples/esbuild`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-esbuild) shows how to use [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) in esbuild.\
The unplugin compiles Plumeria styles into the CSS asset produced by esbuild.

`npx @plumeria/init` detects esbuild and writes this setup for you; see [@plumeria/init](/docs/api-reference/init). The rest of this page is the same setup by hand.

## Installation [#installation]

<Tabs items="['npm',  'yarn', 'pnpm']">
  <Tab>
    ```sh title="Terminal"
    npm i -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    yarn add -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    pnpm i -D @plumeria/unplugin
    ```
  </Tab>
</Tabs>

## Usage [#usage]

```ts title="scripts/build.js"
import esbuild from 'esbuild';
import plumeria from '@plumeria/unplugin';

esbuild
  .build({
    entryPoints: ['src/index.tsx'],
    bundle: true,
    outfile: 'dist/bundle.js',
    plugins: [
      plumeria.esbuild({
        include: /\.[jt]sx?$/,
      }),
    ],
    loader: {
      '.tsx': 'tsx',
      '.ts': 'ts',
    },
    format: 'esm',
    minify: false,
  })
  .catch(() => process.exit(1));
```

<Cards>
  <Card title="Shipping this as a component library" href="/docs/integration/component-library" />

  <Card title="See more about Installation unplugin" href="/docs/getting-started/installation" />
</Cards>