# @unocss/transformer-directives

> UnoCSS transformer for `@apply` directive

Latest version **66.10.5** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unocss/transformer-directives
pnpm add @unocss/transformer-directives
yarn add @unocss/transformer-directives
bun add @unocss/transformer-directives
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 66.10.5 |
| Published | 2026-09-16 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 18965 |
| Author | hannoeru <me@hanlee.co> |
| Maintainers | antfu, unocss-bot, zyyv |
| Keywords | unocss, unocss-transformer |

## Links

- npm: https://www.npmjs.com/package/@unocss/transformer-directives
- Repository: https://github.com/unocss/unocss
- Homepage: https://unocss.dev
- Issues: https://github.com/unocss/unocss/issues
- npm.io page: https://npm.io/package/@unocss/transformer-directives

## Dependencies (3)

- [css-tree](https://npm.io/package/css-tree.md) ^3.2.1
- [@unocss/core](https://npm.io/package/@unocss/core.md) 66.10.5
- [@unocss/rule-utils](https://npm.io/package/@unocss/rule-utils.md) 66.10.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 66.10.5 (latest) — 2026-09-16
- 66.10.4 — 2026-09-15
- 66.10.3 — 2026-09-15
- 66.10.2 — 2026-09-11
- 66.10.1 — 2026-09-09
- 66.10.0 — 2026-09-04
- 66.9.2 — 2026-09-02
- 66.9.1 — 2026-09-01
- 66.8.1 — 2026-08-21
- 66.8.0 — 2026-08-19
- 66.8.0-beta.1 — 2026-08-19
- 66.7.5 — 2026-07-07
- 66.7.4 — 2026-06-29
- 66.7.4-beta.1 — 2026-06-29
- 66.7.3 — 2026-06-26
- … 326 more at https://npm.io/package/@unocss/transformer-directives/versions

## README

# @unocss/transformer-directives

<!-- @unocss-ignore -->

UnoCSS transformer for `@apply`、`@screen` and `theme()` directive

## Install

```bash
npm i -D @unocss/transformer-directives
```

```ts
import transformerDirectives from '@unocss/transformer-directives'
// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})
```

## Usage

### `@apply`

```css
.custom-div {
  @apply text-center my-0 font-medium;
}
```

Will be transformed to:

```css
.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}
```

#### CSS Variable Style

To be compatible with vanilla CSS, you can use CSS custom properties to replace the `@apply` directive.

```css
.custom-div {
  --at-apply: text-center my-0 font-medium;
}
```

To use rules with `:`, you will need to quote the value

```css
.custom-div {
  --at-apply: 'hover:text-red';
}
```

This feature is enabled by default with a few alias, you can configure or disable it via:

```js
transformerDirectives({
  // the defaults
  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
  // or disable with:
  // applyVariable: false
})
```

### `@screen`

The `@screen` directive allows you to create media queries that reference your breakpoints by name comes from [`theme.breakpoints`](https://github.com/unocss/unocss/blob/main/README.md#extend-theme).

```css
.grid {
  --uno: grid grid-cols-2;
}
@screen xs {
  .grid {
    --uno: grid-cols-1;
  }
}
@screen sm {
  .grid {
    --uno: grid-cols-3;
  }
}
/* ... */
```

Will be transformed to:

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */
```

#### Breakpoint Variant Support

`@screen` also supports `lt`、`at` variants

##### `@screen lt`

```css
.grid {
  --uno: grid grid-cols-2;
}
@screen lt-xs {
  .grid {
    --uno: grid-cols-1;
  }
}
@screen lt-sm {
  .grid {
    --uno: grid-cols-3;
  }
}
/* ... */
```

Will be transformed to:

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */
```

##### `@screen at`

```css
.grid {
  --uno: grid grid-cols-2;
}
@screen at-xs {
  .grid {
    --uno: grid-cols-1;
  }
}
@screen at-xl {
  .grid {
    --uno: grid-cols-3;
  }
}
@screen at-xxl {
  .grid {
    --uno: grid-cols-4;
  }
}
/* ... */
```

Will be transformed to:

```css
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ... */
```

### `theme()`

Use the `theme()` function to access your theme config values using dot notation.

```css
.btn-blue {
  background-color: theme('colors.blue.500');
}
```

Will be compiled to:

```css
.btn-blue {
  background-color: #3b82f6;
}
```

## License

MIT License &copy; 2022-PRESENT [hannoeru](https://github.com/hannoeru)

---
_Source: https://npm.io/package/@unocss/transformer-directives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._