# Unocss plugin

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

## Install

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

{/* prettier-ignore-end */}

## Configuration

Register the `icestackPreset` plug-in in `uno.config.ts` and pass a `loadDirectory` parameter to locate the location where the product was just generated:

```js filename="uno.config.ts"
// uno.config.ts
import path from 'node:path'
import { defineConfig, presetUno } from 'unocss'
import { icestackPreset } from '@icestack/unocss'

export default defineConfig({
  presets: [
    // ...UnoCSS preset
    icestackPreset({
      loadDirectory: path.resolve(__dirname, 'my-ui'),
      loadConfig: true
    })
    // ...UnoCSS preset
  ]
  // ...UnoCSS options
})
```

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
</Callout>

## Naming Conflict

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

For example, if the `tab` component in `unocss` conflicts with the `css tab` component, you can set it like this:

```js
// icestack.config.cjs
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    tab: {
      postcss: {
        prefix: 'ice-'
      }
    }
  }
}

module.exports = config
```

Then you can write like this:

```html
<div role="tablist" class="ice-tabs ice-tabs-bordered">
  <button role="ice-tab" class="ice-tab">Tab 1</button>
  <button role="ice-tab" class="ice-tab ice-tab-active">Tab 2</button>
  <button role="ice-tab" class="ice-tab">Tab 3</button>
</div>
```

## IntelliSense

As long as we install the unocss 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 `uno.config.ts` file.

At this time, the `unocss` plug-in will re-read the plug-in and generate intelligent prompts.

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


## Options

### loadDirectory

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

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

### loadConfig

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

Inject the `unocss` config into `uno.config.ts`. Only by enabling this option can you use the color types defined in the `@icestack/ui` theme.

