import { Tabs, Tab, Callout } from 'nextra/components'

# Tailwindcss plugin

## Install

{/* prettier-ignore-start */}
<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  <Tab>
```bash 
pnpm install -D @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash
npm install -D @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash 
yarn add -D @icestack/tailwindcss
```
</Tab>
  <Tab>
```bash 
bun add -D @icestack/tailwindcss
```
</Tab>
</Tabs>

{/* prettier-ignore-end */}

## Configuration

Register the `icestackPlugin` plug-in in `tailwind.config.js` and pass a `loadDirectory` parameter to locate the location where the product was just generated:

```js filename="tailwind.config.js"
const path = require('node:path')
const { icestackPlugin } = require('@icestack/tailwindcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    icestackPlugin({
      // Absolute path to the loading directory
      loadDirectory: path.resolve(__dirname, 'my-ui'),
      // Whether to inject tailwindcss theme config
      // When true, the generator's primary success warning colors will enter the tailwindcss.theme.extend configuration
      //You can use bg-primary / text-success
      //Default value: false
      loadConfig: true
      // ...
    })
  ]
}
```

Then as long as we run the project normally, we can directly use all the `CSS` components in the `my-ui` directory!

<Callout type="info">
You can find the default [all components list](/components/overview) directly here and copy `html` directly

If your `class` naming conflicts with the default scheme, you can set [`postcss.prefix`](/config/postcss#postcssprefix) to add a prefix to avoid conflicts.

</Callout>

## IntelliSense

As long as we install the IDE plug-in, smart prompts will appear, including `@icestack/ui` default presets and all `CSS` classes generated by yourself.

Usually after each `icestack build` is built, we can manually save the `tailwind.config.js` file.

At this time, the `tailwindcss` plug-in will re-read the plug-in and generate smart tips.

![IntelliSense](/IntelliSense/tailwindcss.png)

## Options

### loadDirectory

**Type:** `string`
**Required!**

The path to load the `@icestack/ui` product

### loadConfig

**Type:** `boolean`
**Default:** `false`

Inject `tailwindcss` config into `tailwind.config.js`. Only by enabling this option can you use the color types defined in the `@icestack/ui` theme.
