متغيرات CSS في Tailwind v4 وإعداد قالبك المسبق

كل إعداد قالب مسبق في VeloCMS هو ملف JSON يُعرِّف رموز التصميم الدلالية — الألوان، ومقاييس الطباعة، وأنصاف أقطار الحدود، والمسافات — بوصفها خصائص CSS مخصصة. يقرأ محرك @theme في Tailwind v4 هذه الخصائص ويُولِّد فئات الأدوات تلقائيًا. عند تبديل القوالب، تتغير قيم الخصائص المخصصة وحدها؛ تبقى فئات Tailwind في HTML كما هي. هكذا يُعيَّن القالب ذاته بجمال على الإعدادات الخمسة المسبقة دون تعديل.

كيف يُعيَّن ملف JSON المسبق على متغيرات CSS

ملف JSON المسبق كـ { colors: { primary: 'oklch(0.55 0.22 250)' } } يُترجَم إلى --color-primary: oklch(0.55 0.22 250) في كتلة :root. يجعل محرك @theme في Tailwind v4 بعد ذلك الفئات bg-primary وtext-primary وborder-primary وring-primary متاحةً كفئات أدوات — وكلها تقرأ من المتغير CSS ذاته. غيّر المتغير، يتحدث كل فئة أداة تستند إليه تلقائيًا.

/* Generated from the theme preset JSON */
@theme inline {
  --color-background: oklch(0.98 0 0);
  --color-foreground: oklch(0.12 0 0);
  --color-primary: oklch(0.55 0.22 250);
  --color-muted: oklch(0.96 0.01 240);
  --color-muted-foreground: oklch(0.45 0.02 240);
  --font-sans: 'Inter', sans-serif;
  --radius: 0.75rem;
}

توسيع الإعداد المسبق دون تعديل الملف المصدر

إذا أردت تجاوز رمز واحد فقط — مثل تغيير --radius من 0.75rem إلى 0.25rem لتصميم أكثر حدةً — أضف تجاوز CSS في خيار Advanced CSS من إدارة القوالب. يذهب التجاوز داخل كتلة :root ويأخذ الأولوية لأنه يُحقَن بعد الإعداد المسبق في تسلسل الأوراق الأسلوبية. هذا هو النمط الصحيح للتعديلات الصغيرة. للحصول على لوحة ألوان مخصصة كاملة، أنشئ ملف إعداد قالب JSON جديدًا عوضًا عن ذلك.

الرموز الدلالية مقابل فئات Tailwind الخام

تستخدم قوالب VeloCMS دائمًا فئات الرموز الدلالية — bg-background وtext-foreground وbg-primary — بدلًا من فئات الألوان الخام كـ bg-indigo-600 أو text-zinc-900. هذا مقصود: الفئات الخام مرتبطة بظل لوني محدد ولا تستجيب لتبديل القوالب. لو استخدمت القالب bg-indigo-600، فإن التبديل من الإعداد المسبق Indigo إلى Terminal لن يغيّر ذلك العنصر — يبقى أزرق اللون. أما الرموز الدلالية فتتبدّل تلقائيًا لأنها تقرأ من متغيرات CSS.