1---
2name: transformer-directives
3description: CSS directives @apply, @screen, theme(), and icon()
4---
5 
6# Transformer Directives
7 
8Enables `@apply`, `@screen`, `theme()`, and `icon()` directives in CSS.
9 
10## Installation
11 
12```ts
13import { defineConfig, transformerDirectives } from 'unocss'
14 
15export default defineConfig({
16  transformers: [
17    transformerDirectives(),
18  ],
19})
20```
21 
22## @apply
23 
24Apply utility classes in CSS:
25 
26```css
27.custom-btn {
28  @apply py-2 px-4 font-semibold rounded-lg;
29}
30 
31/* With variants - use quotes */
32.custom-btn {
33  @apply 'hover:bg-blue-600 focus:ring-2';
34}
35```
36 
37### CSS Custom Property Alternative
38 
39For vanilla CSS compatibility:
40 
41```css
42.custom-div {
43  --at-apply: text-center my-0 font-medium;
44}
45```
46 
47Supported aliases: `--at-apply`, `--uno-apply`, `--uno`
48 
49Configure aliases:
50 
51```ts
52transformerDirectives({
53  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
54  // or disable: applyVariable: false
55})
56```
57 
58## @screen
59 
60Create breakpoint media queries:
61 
62```css
63.grid {
64  display: grid;
65  grid-template-columns: repeat(2, 1fr);
66}
67 
68@screen sm {
69  .grid {
70    grid-template-columns: repeat(3, 1fr);
71  }
72}
73 
74@screen lg {
75  .grid {
76    grid-template-columns: repeat(4, 1fr);
77  }
78}
79```
80 
81### Breakpoint Variants
82 
83```css
84/* Less than breakpoint */
85@screen lt-sm {
86  .item { display: none; }
87}
88 
89/* At specific breakpoint only */
90@screen at-md {
91  .item { width: 50%; }
92}
93```
94 
95## theme()
96 
97Access theme values in CSS:
98 
99```css
100.btn-blue {
101  background-color: theme('colors.blue.500');
102  padding: theme('spacing.4');
103  border-radius: theme('borderRadius.lg');
104}
105```
106 
107Dot notation paths into your theme config.
108 
109## icon()
110 
111Convert icon utility to SVG (requires preset-icons):
112 
113```css
114.icon-sun {
115  background-image: icon('i-carbon-sun');
116}
117 
118/* With custom color */
119.icon-moon {
120  background-image: icon('i-carbon-moon', '#fff');
121}
122 
123/* Using theme color */
124.icon-alert {
125  background-image: icon('i-carbon-warning', 'theme("colors.red.500")');
126}
127```
128 
129## Complete Example
130 
131```css
132.card {
133  @apply rounded-lg shadow-md p-4;
134  background-color: theme('colors.white');
135}
136 
137.card-header {
138  @apply 'font-bold text-lg border-b';
139  padding-bottom: theme('spacing.2');
140}
141 
142@screen md {
143  .card {
144    @apply flex gap-4;
145  }
146}
147 
148.card-icon {
149  background-image: icon('i-carbon-document');
150  @apply w-6 h-6;
151}
152```
153 
154<!-- 
155Source references:
156- https://unocss.dev/transformers/directives
157-->
158