@theme {
--color-brand-tint: #ffedc8;
}
дотор тавиад шууд .my-text { @apply brand-tint; } <span className="my-text">
ашиглаж болж байсан.
Тэгвэл:
@layer base {
:root {
--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 зарлах
/* web-variables.css */
:root {
--color-my-blue: #996633;
}
html.dark {
--color-my-blue: #663311;
}
✅ 2. Tailwind-д register хийх
/* variable файлаа эхэлж оруулна */
@import "./web-variables.css";
@theme {
--color-my-blue: var(--color-my-blue);
}
Tailwind Generated CSS:
.bg-my-blue {
background-color: var(--color-my-blue);
}
@layer components {
.my-button {
@apply bg-my-blue text-white px-4 py-2 rounded;
}
}
✅ 3. ОДОО АШИГЛАХ
<html className="dark">
<button className="my-button">
Save
</button>
No comments:
Post a Comment