@theme {
--color-brand-tint: #ffedc8;
}
дотор тавиад шууд .my-text { @apply brand-tint; } <span className="my-text">
ашиглаж болж байсан.
тэгвэл
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--font-scale: 1;
--text-2xs: calc(0.625rem * var(--font-scale));
--text-xs: calc(0.75rem * var(--font-scale));
--text-sm: calc(0.875rem * var(--font-scale));
--text-base: calc(1rem * var(--font-scale));
--text-lg: calc(1.125rem * var(--font-scale));
--text-xl: calc(1.25rem * var(--font-scale));
--text-2xl: calc(1.5rem * var(--font-scale));
--text-3xl: calc(1.875rem * var(--font-scale));
--text-4xl: calc(2.25rem * var(--font-scale));
--text-5xl: calc(3rem * var(--font-scale));
--text-6xl: calc(3.75rem * var(--font-scale));
--text-7xl: calc(4.5rem * var(--font-scale));
}
}
ингэж тэмдэглээд шууд .my-text { @apply text-sm; } <span className="my-text"> гэж ашиглахад ямар ч асуудалгүй ажиллаж байсан шиг би :root.dark { --color-my-blue: #996633; } .my-button { @apply my-blue; } <button className="my-button"> гэж ашигламаар байна шүү дээ?
шийдэл
*********************************************************************************
❗ Чиний хүсэж байгаа зүйл
:root.dark {
--color-my-blue: #996633;
}
.my-button {
@apply my-blue;
}
👉 “my-blue”-г Tailwind utility шиг ашиглах
:root {
--color-text-sm: 1;
}
text-sm бол нэгэнт tailwind дотор бүртгэлтэй тул шууд ашиглаж болж байсан.
❌ ЯАГААД ЭНЭ БОЛОХГҮЙ ВЭ?
@apply зөвхөн:
Tailwind-ийн utility class
эсвэл Tailwind config-аар үүссэн class
дээр ажиллана.
👉 my-blue бол:
CSS variable ❌
Tailwind utility ❌ (одоо байхгүй)
Тиймээс @apply my-blue ажиллах боломжгүй.
🔥 ЧИНИЙ “brand-tint” ЯАГААД АЖИЛЛАСАН БЭ?
@theme {
--color-brand-tint: #ffedc8;
}
Tailwind шинэ engine дээр:
👉 --color-* variables → автоматаар Tailwind color system-д орж
👉 brand-tint → utility болж үүсдэг
Тэгэхээр:
@apply brand-tint;
✔️ ажиллана
🚀 ЧИНИЙ ХҮССЭН ШИЙДЭЛ (ЗӨВ ЗАГВАР)
✅ 1. CSS variables
:root {
--color-my-blue: #3b82f6;
}
html.dark {
--color-my-blue: #996633;
}
✅ 2. Tailwind-д register хийх
@theme {
--color-my-blue: var(--color-my-blue);
}
3. ОДОО ЧИ АШИГЛАЖ БОЛНО
.my-button {
@apply text-my-blue;
}
эсвэл
<button className="text-my-blue">
