Transformer Directives
Enables @apply, @screen, theme(), and icon() directives in CSS.
Installation
import { defineConfig, transformerDirectives } from 'unocss'
export default defineConfig({
transformers: [
transformerDirectives(),
],
})@apply
Apply utility classes in CSS:
.custom-btn {
@apply py-2 px-4 font-semibold rounded-lg;
}
/* With variants - use quotes */
.custom-btn {
@apply 'hover:bg-blue-600 focus:ring-2';
}CSS Custom Property Alternative
For vanilla CSS compatibility:
.custom-div {
--at-apply: text-center my-0 font-medium;
}Supported aliases: --at-apply, --uno-apply, --uno
Configure aliases:
transformerDirectives({
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
// or disable: applyVariable: false
})@screen
Create breakpoint media queries:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@screen sm {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@screen lg {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}Breakpoint Variants
/* Less than breakpoint */
@screen lt-sm {
.item { display: none; }
}
/* At specific breakpoint only */
@screen at-md {
.item { width: 50%; }
}theme()
Access theme values in CSS:
.btn-blue {
background-color: theme('colors.blue.500');
padding: theme('spacing.4');
border-radius: theme('borderRadius.lg');
}Dot notation paths into your theme config.
icon()
Convert icon utility to SVG (requires preset-icons):
.icon-sun {
background-image: icon('i-carbon-sun');
}
/* With custom color */
.icon-moon {
background-image: icon('i-carbon-moon', '#fff');
}
/* Using theme color */
.icon-alert {
background-image: icon('i-carbon-warning', 'theme("colors.red.500")');
}Complete Example
.card {
@apply rounded-lg shadow-md p-4;
background-color: theme('colors.white');
}
.card-header {
@apply 'font-bold text-lg border-b';
padding-bottom: theme('spacing.2');
}
@screen md {
.card {
@apply flex gap-4;
}
}
.card-icon {
background-image: icon('i-carbon-document');
@apply w-6 h-6;
}