> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# generate-artifacts

> Generate Uniwind artifacts from your CSS entry file

<Badge>Available in Uniwind 1.8.0+ (Free) and 1.2.1+ (Pro)</Badge>

## Overview

The `generate-artifacts` command generates Uniwind artifacts from your CSS entry file.

Use it when you need to run artifact generation manually from a script or CI step.

This is useful in CI actions when you run tools that need generated Uniwind types before Metro or Vite starts, for example a linter or formatter for Tailwind classes.

## Basic Usage

```bash theme={null}
uniwind generate-artifacts --css ./global.css
```

Pass extra themes with repeated `--theme` flags and set the TypeScript declarations path with `--dts`:

```bash theme={null}
uniwind generate-artifacts --css ./global.css --theme premium --theme ocean --dts ./src/uniwind-types.d.ts
```

## Generated Files

The command writes the same artifacts that Metro and Vite generate during a build:

| File | Location | Contents |
| - | - | - |
| `uniwind.css` | Inside the installed `uniwind` package | The CSS that `@import 'uniwind'` loads, including the variants and theme setup for your themes |
| `uniwind-types.d.ts` | Project root, or the path passed to `--dts` | TypeScript declarations for your themes |

<Info>
  **Uniwind Pro 1.8.0+:** Both files are written atomically: Uniwind writes a temporary file next to the target and renames it into place. A process that reads the file at the same time sees either the old or the new version, never a partially written one. This fixes random `Missing closing } at @theme` errors in CI when several Metro workers, or Metro and the CLI, generate artifacts at the same time.
</Info>

## Options

### --css

<ParamField path="--css" type="string" required>
  CSS entry file path, for example `./global.css`.
</ParamField>

This should point to the CSS file where you import Tailwind and Uniwind:

```css global.css theme={null}
@import 'tailwindcss';
@import 'uniwind';
```

### --theme

<ParamField path="--theme" type="string">
  Extra theme name. Pass this option multiple times to match the custom themes from `extraThemes`.
</ParamField>

```bash theme={null}
uniwind generate-artifacts --css ./global.css --theme premium --theme ocean
```

Define these themes in your Metro or Vite config with `extraThemes`:

```js metro.config.js theme={null}
module.exports = withUniwindConfig(config, {
  cssEntryFile: './global.css',
  extraThemes: ['premium', 'ocean'],
});
```

```ts vite.config.ts theme={null}
uniwind({
  cssEntryFile: './global.css',
  extraThemes: ['premium', 'ocean'],
})
```

### --dts

<ParamField path="--dts" type="string">
  Generated TypeScript declarations path.
</ParamField>

```bash theme={null}
uniwind generate-artifacts --css ./global.css --dts ./src/uniwind-types.d.ts
```

<Info>
  Place the `.d.ts` file in your `src` or `app` directory for automatic TypeScript inclusion. For custom paths outside these directories, add the file to your `tsconfig.json`.
</Info>

### --help

<ParamField path="--help" type="boolean">
  Show help for the command.
</ParamField>

```bash theme={null}
uniwind generate-artifacts --help
```

## Usage Reference

```bash theme={null}
uniwind generate-artifacts --css <file> [--theme <name>...] [--dts <file>]
```

## Related

<CardGroup cols={2}>
  <Card title="Metro Config" icon="train" href="/api/metro-config">
    Configure automatic artifact generation in Metro
  </Card>

  <Card title="Global CSS" icon="css3" href="/theming/global-css">
    Learn more about configuring your CSS entry file
  </Card>

  <Card title="Custom Themes" icon="swatchbook" href="/theming/custom-themes">
    Create and register extra themes
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.