Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.3 KiB

Raw Blame History

name, description

name	description
transformer-directives	CSS directives @apply, @screen, theme(), and icon()

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

2.3 KiB Raw Blame History