?? Tailwind CSS? ??? ???? ????? : ?? ??? ?? ??? ?? ????. ? ??? ? ??? ??? ???? ??? ????, ? ?? ???? ?? ?? ???? ?? ??? ???? ?? ??? ??? ?????. ?? ???? ?? ? ??? @apply ?????.

@apply ??

Tailwind? @apply ???? CSS? Tailwind ???? ???? ?? ?? ? ? ????. ??? ??? ?? ?? ??? ????? ???? ??? ???? ???? ????. ??? ? ??? ? ??? ?? ?? ????.

 <code>/* Input */ .selector { @apply p-4; } /* Output */ .selector { padding: 1rem; }</code>

@apply ??? ?? Adam Wathan? ??? ??? ??? ??? ??? ??????. ??? ?? @apply ?? ???????? ?? ? ?? ?? ????? ?????.

@apply Sass Mixin? ?????

Sass? ??? ???? ?? @apply Sass Mixins? ???? ?????. Mixins? ???? ??? ??? ?? ??? ?? ? ? ????.

• Sass? @mixin ???? Mixins? ???? @include ???.

 <code>// Sass Mixin @mixin some-mixin() { color: red; background: blue; } // Using the mixin .selector { @include some-mixin(); } /* Output */ .selector { color: red; background: blue; }</code>

Tailwind? @apply ? ??? ?????.

 <code>/* Defining the utility */ @utility some-utility { color: red; background: blue; } /* Applying the utility */ .selector { @apply some-utility; } /* Output */ .selector { color: red; background: blue; }</code>

?? ?? ???? : Sass Mixins?? ??????

Tailwind Utilities? HTML?? ?? ???? ?? CSS ??? ???? ????.

 <code>@utility some-utility { color: red; background: blue; }</code>

<code><div class="some-utility"> ...</div></code>

Sass Mixins? ?? ???? ?????.

 <code>@mixin some-mixin() { color: red; background: blue; } .selector { @include some-mixin(); }</code> ...

??, Tailwind? ?? ? ??? ???? HTML ??? ?? ??? ?? ??? ?????? ?? ? ???? ??????.

?? ? : ?? ? ?? ????

???? ????? ??? ????? ??????.

 <code>@utility horizontal { display: flex; flex-direction: row; gap: 1rem; } @utility vertical { display: flex; flex-direction: column; gap: 1rem; }</code>

?? ? ??? ?? ?????.

<code><div class="vertical sm:horizontal"> ...</div></code>

?? CSS?? @apply ?????.

 <code>.your-layout { @apply vertical; @media (width >= 640px) { @apply horizontal; } }</code>

? ?? ?? ?? ?? ???? ?? ??? ??? ???? ??? ?????.

Sass Mixins? ???? ?? ?? ????? ??

Sass Mixins? ? ???? @if ? @for ??? ?? ?? ??? ?? ??? ?????.

 <code>@mixin avatar($size, $circle: false) { width: $size; height: $size; @if $circle { border-radius: math.div($size, 2); } }</code>

?? ?? ????? ? ????? ????? ?? ????? ?? ??? ?? ? ?????. ??? CSS ??? ?? ?? CSS ???? ??? ??????.

? ?? ? : ??? ??? ??? ????

??? ??? ??? ????? @apply ? ?? ?????.

 <code>@utility grid-simple { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap, 1rem); }</code>

?? ? ??? ?? ??? ???? ??????.

<code><div class="grid-simple --cols-2 sm:--cols-3"> ...</div></code>

?? @apply ?? :

 <code>.your-layout { @apply grid-simple; @media (width >= 640px) { --cols: 3; } }</code>

??

Tailwind? @apply ????? ?? ?? ??????. @apply ???? ???? ?? ??? ??? ????? Tailwind? ???? ??? ? ????. ??? ????? ???? ??? ???? ?? ???? ??? ????? ?? ??? ??? ??? ? ????. ? ??? ???? ???? (?? Tailwind 3, Tailwind 4 ????? ? ???) ?? ???? ?????.

? ??? Tailwind ' s @apply ??? ???? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!