Transformer Directives

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

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

transformerDirectives({
  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
  // or disable: applyVariable: false
})

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

/* Less than breakpoint */
@screen lt-sm {
  .item { display: none; }
}

/* At specific breakpoint only */
@screen at-md {
  .item { width: 50%; }
}

.btn-blue {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.4');
  border-radius: theme('borderRadius.lg');
}

.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")');
}

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