@unocss/transformer-directives

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

Install

npm i -D @unocss/transformer-directives

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

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

Usage

`@apply`

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

Will be transformed to:

.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.

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

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

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

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

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.

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

Will be transformed to:

.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`

.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:

.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`

.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:

.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.

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

Will be compiled to:

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

License

Current Tags

66.6.3 ... latest (a month ago)

315 Versions

66.6.3 ... a month ago
66.6.2 ... 2 months ago
66.6.1 ... 2 months ago
66.6.0 ... 3 months ago
66.6.0-beta.1 ... 3 months ago
66.5.12 ... 3 months ago
66.5.11 ... 4 months ago
66.5.10 ... 4 months ago
66.5.10-beta.1 ... 4 months ago
66.5.9 ... 5 months ago
66.5.7 ... 5 months ago
66.5.6 ... 5 months ago
66.5.5 ... 5 months ago
66.5.4 ... 6 months ago
66.5.3 ... 6 months ago
66.5.2 ... 7 months ago
66.5.1 ... 7 months ago
66.5.0 ... 7 months ago
66.4.2 ... 8 months ago
66.4.1 ... 8 months ago
66.4.0 ... 8 months ago
66.3.3 ... 9 months ago
66.3.2 ... 10 months ago
66.3.1 ... 10 months ago
66.3.1-beta.1 ... 10 months ago
66.2.3 ... 10 months ago
66.2.2 ... 10 months ago
66.2.1 ... 10 months ago
66.2.0 ... 10 months ago
66.1.4 ... 10 months ago
66.1.3 ... 10 months ago
66.1.2 ... a year ago
66.1.1 ... a year ago
66.1.0 ... a year ago
66.1.0-beta.13 ... a year ago
66.1.0-beta.12 ... a year ago
66.1.0-beta.11 ... a year ago
66.1.0-beta.10 ... a year ago
66.1.0-beta.9 ... a year ago
66.1.0-beta.8 ... a year ago
66.1.0-beta.7 ... a year ago
66.1.0-beta.6 ... a year ago
66.1.0-beta.5 ... a year ago
66.1.0-beta.4 ... a year ago
66.1.0-beta.3 ... a year ago
66.1.0-beta.2 ... a year ago
66.1.0-beta.1 ... a year ago
66.0.0 ... a year ago
65.5.0 ... a year ago
65.4.3 ... a year ago
65.4.2 ... a year ago
65.4.0 ... a year ago
0.65.4 ... a year ago
0.65.3 ... a year ago
0.65.2 ... a year ago
0.65.1 ... a year ago
0.65.0 ... a year ago
0.65.0-beta.3 ... a year ago
0.65.0-beta.2 ... a year ago
0.65.0-beta.1 ... a year ago
0.64.1 ... a year ago
0.64.0 ... a year ago
0.63.6 ... a year ago
0.63.5 ... a year ago
0.63.4 ... 2 years ago
0.63.3 ... 2 years ago
0.63.2 ... 2 years ago
0.63.1 ... 2 years ago
0.63.0 ... 2 years ago
0.62.4 ... 2 years ago
0.62.3 ... 2 years ago
0.62.2 ... 2 years ago
0.62.1 ... 2 years ago
0.62.0 ... 2 years ago
0.61.9 ... 2 years ago
0.61.8 ... 2 years ago
0.61.7 ... 2 years ago
0.61.6 ... 2 years ago
0.61.5 ... 2 years ago
0.61.4 ... 2 years ago
0.61.3 ... 2 years ago
0.61.2 ... 2 years ago
0.61.0 ... 2 years ago
0.60.4 ... 2 years ago
0.60.3 ... 2 years ago
0.60.2 ... 2 years ago
0.60.1 ... 2 years ago
0.60.0 ... 2 years ago
0.59.4 ... 2 years ago
0.59.3 ... 2 years ago
0.59.2 ... 2 years ago
0.59.1 ... 2 years ago
0.59.0 ... 2 years ago
0.59.0-beta.1 ... 2 years ago
0.58.9 ... 2 years ago
0.58.8 ... 2 years ago
0.58.7 ... 2 years ago
0.58.6 ... 2 years ago
0.58.5 ... 2 years ago
0.58.4 ... 2 years ago
0.58.3 ... 2 years ago
0.58.2 ... 2 years ago
0.58.1 ... 2 years ago
0.58.0 ... 2 years ago
0.57.7 ... 2 years ago
0.57.6 ... 2 years ago
0.57.5 ... 2 years ago
0.57.4 ... 2 years ago
0.57.3 ... 2 years ago
0.57.2 ... 2 years ago
0.57.1 ... 2 years ago
0.57.0 ... 2 years ago
0.56.5 ... 3 years ago
0.56.4 ... 3 years ago
0.56.3 ... 3 years ago
0.56.2 ... 3 years ago
0.56.1 ... 3 years ago
0.56.0 ... 3 years ago
0.55.7 ... 3 years ago
0.55.6 ... 3 years ago
0.55.5 ... 3 years ago
0.55.4 ... 3 years ago
0.55.3 ... 3 years ago
0.55.2 ... 3 years ago
0.55.1 ... 3 years ago
0.55.0 ... 3 years ago
0.54.3 ... 3 years ago
0.54.2 ... 3 years ago
0.54.1 ... 3 years ago
0.54.0 ... 3 years ago
0.53.6 ... 3 years ago
0.53.5 ... 3 years ago
0.53.4 ... 3 years ago
0.53.3 ... 3 years ago
0.53.1 ... 3 years ago
0.53.0 ... 3 years ago
0.52.7 ... 3 years ago
0.52.6 ... 3 years ago
0.52.5 ... 3 years ago
0.52.4 ... 3 years ago
0.52.3 ... 3 years ago
0.52.2 ... 3 years ago
0.52.1 ... 3 years ago
0.52.0 ... 3 years ago
0.51.13 ... 3 years ago
0.51.12 ... 3 years ago
0.51.8 ... 3 years ago
0.51.7 ... 3 years ago
0.51.6 ... 3 years ago
0.51.5 ... 3 years ago
0.51.4 ... 3 years ago
0.51.3 ... 3 years ago
0.51.2 ... 3 years ago
0.51.1 ... 3 years ago
0.51.0 ... 3 years ago
0.50.8 ... 3 years ago
0.50.7 ... 3 years ago
0.50.6 ... 3 years ago
0.50.5 ... 3 years ago
0.50.4 ... 3 years ago
0.50.3 ... 3 years ago
0.50.2 ... 3 years ago
0.50.1 ... 3 years ago
0.50.0 ... 3 years ago
0.49.8 ... 3 years ago
0.49.7 ... 3 years ago
0.49.6 ... 3 years ago
0.49.5 ... 3 years ago
0.49.4 ... 3 years ago
0.49.3 ... 3 years ago
0.49.2 ... 3 years ago
0.49.1 ... 3 years ago
0.49.0 ... 3 years ago
0.48.5 ... 3 years ago
0.48.4 ... 3 years ago
0.48.3 ... 3 years ago
0.48.2 ... 3 years ago
0.48.1 ... 3 years ago
0.48.0 ... 3 years ago
0.47.6 ... 3 years ago
0.47.5 ... 3 years ago
0.47.4 ... 3 years ago
0.47.3 ... 3 years ago
0.47.2 ... 3 years ago
0.47.1 ... 3 years ago
0.47.0 ... 3 years ago
0.46.5 ... 3 years ago
0.46.4 ... 3 years ago
0.46.3 ... 3 years ago
0.46.2 ... 3 years ago
0.46.1 ... 3 years ago
0.46.0 ... 3 years ago
0.45.30 ... 3 years ago
0.45.29 ... 4 years ago
0.45.28 ... 4 years ago
0.45.26 ... 4 years ago
0.45.25 ... 4 years ago
0.45.24 ... 4 years ago
0.45.23 ... 4 years ago
0.45.22 ... 4 years ago
0.45.21 ... 4 years ago
0.45.20 ... 4 years ago
0.45.19 ... 4 years ago
0.45.18 ... 4 years ago
0.45.15 ... 4 years ago
0.45.14 ... 4 years ago
0.45.13 ... 4 years ago
0.45.12 ... 4 years ago
0.45.9 ... 4 years ago
0.45.8 ... 4 years ago
0.45.7 ... 4 years ago
0.45.6 ... 4 years ago
0.45.5 ... 4 years ago
0.45.4 ... 4 years ago
0.45.3 ... 4 years ago
0.45.1 ... 4 years ago
0.44.7 ... 4 years ago
0.44.5 ... 4 years ago
0.44.4 ... 4 years ago
0.44.3 ... 4 years ago
0.44.2 ... 4 years ago
0.44.1 ... 4 years ago
0.44.0 ... 4 years ago
0.43.2 ... 4 years ago
0.43.1 ... 4 years ago
0.43.0 ... 4 years ago
0.42.1 ... 4 years ago
0.42.0 ... 4 years ago
0.41.2 ... 4 years ago
0.41.1 ... 4 years ago
0.41.0 ... 4 years ago
0.40.0 ... 4 years ago
0.39.3 ... 4 years ago
0.39.2 ... 4 years ago
0.39.1 ... 4 years ago
0.39.0 ... 4 years ago
0.38.2 ... 4 years ago
0.38.1 ... 4 years ago
0.38.0 ... 4 years ago
0.37.4 ... 4 years ago
0.37.3 ... 4 years ago
0.37.2 ... 4 years ago
0.37.1 ... 4 years ago
0.37.0 ... 4 years ago
0.36.0 ... 4 years ago
0.35.4 ... 4 years ago
0.35.3 ... 4 years ago
0.35.2 ... 4 years ago
0.35.1 ... 4 years ago
0.35.0 ... 4 years ago
0.34.1 ... 4 years ago
0.34.0 ... 4 years ago
0.33.5 ... 4 years ago
0.33.4 ... 4 years ago
0.33.2 ... 4 years ago
0.33.1 ... 4 years ago
0.33.0 ... 4 years ago
0.32.13 ... 4 years ago
0.32.12 ... 4 years ago
0.32.11 ... 4 years ago
0.32.9 ... 4 years ago
0.32.8 ... 4 years ago
0.32.7 ... 4 years ago
0.32.1 ... 4 years ago
0.32.0 ... 4 years ago
0.31.17 ... 4 years ago
0.31.16 ... 4 years ago
0.31.15 ... 4 years ago
0.31.14 ... 4 years ago
0.31.13 ... 4 years ago
0.31.12 ... 4 years ago
0.31.10 ... 4 years ago
0.31.9 ... 4 years ago
0.31.8 ... 4 years ago
0.31.6 ... 4 years ago
0.31.5 ... 4 years ago
0.31.3 ... 4 years ago
0.31.2 ... 4 years ago
0.31.0 ... 4 years ago
0.30.13 ... 4 years ago
0.30.12 ... 4 years ago
0.30.11 ... 4 years ago
0.30.10 ... 4 years ago
0.30.8 ... 4 years ago
0.30.7 ... 4 years ago
0.30.6 ... 4 years ago
0.30.5 ... 4 years ago
0.30.4 ... 4 years ago
0.30.3 ... 4 years ago
0.30.2 ... 4 years ago
0.30.1 ... 4 years ago
0.30.0 ... 4 years ago
0.29.6 ... 4 years ago
0.29.5 ... 4 years ago
0.29.4 ... 4 years ago
0.29.3 ... 4 years ago
0.29.2 ... 4 years ago
0.29.1 ... 4 years ago
0.29.0 ... 4 years ago
0.28.3 ... 4 years ago
0.28.2 ... 4 years ago
0.28.1 ... 4 years ago
0.28.0 ... 4 years ago
0.27.6 ... 4 years ago
0.27.5 ... 4 years ago
0.27.4 ... 4 years ago
0.27.3 ... 4 years ago
0.27.2 ... 4 years ago
0.27.1 ... 4 years ago
0.27.0 ... 4 years ago
0.26.4 ... 4 years ago
0.26.3 ... 4 years ago
0.26.2 ... 4 years ago
0.26.1 ... 4 years ago
0.26.0 ... 4 years ago