/unocss

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. Also works in at-rule conditions:

@media (min-width: theme('breakpoints.md')) {
  .btn-blue {
    background-color: theme('colors.blue.500');
  }
}

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;
}