@apply Directive

The @apply directive lets you use Tailwind utility classes inside your .ui-* selectors. It's the primary way to define component styles in TailUI.

1.ui-button {
2  @apply px-4 py-2 rounded-lg font-medium transition-all;
3}
4
5.ui-button.ui-primary {
6  @apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800;
7}
8
9.ui-button.ui-secondary {
10  @apply bg-gray-100 text-gray-800 hover:bg-gray-200;
11}
12
13.ui-button.ui-sm {
14  @apply px-3 py-1.5 text-sm;
15}
16
17.ui-button.ui-lg {
18  @apply px-6 py-3 text-lg;
19}

@apply is processed by Tailwind at build time — the utilities are compiled into standard CSS. You get the full power of Tailwind's utility classes while keeping your markup clean with semantic .ui-* classes.