مدخل CSS

ثلاثة أسطر استيراد بترتيب ثابت، ولا ملف إعدادات. هذا كل ما يحتاجه إعداد Tailwind.

الأسطر الثلاثة

app/globals.css

@import "tailwindcss";
@import "topclassui/tokens.css";
@import "topclassui/styles.css";

ما يضيفه كل سطر

السطر, ما يضيفه
السطر	ما يضيفه
`tailwindcss`	Tailwind نفسه: الطبقة الأساسية والأصناف المساعدة
`topclassui/tokens.css`	كل متغيّرات `--tc-*`، وكتل الأوضاع الثلاثة، ومقابض الضبط، وقاعدة الخط العربي
`topclassui/styles.css`	سطر `@source` الذي يفحص المكوّنات، وربط `@theme inline`، والمتغيّرات الشرطية (variants) للحالات المفروضة

لماذا لا يوجد ملف tailwind.config.js

يُضبط Tailwind v4 داخل CSS. الاستيراد الثالث يحمل الربط وسطر @source، فلا يمكن أن يخرج عن تطابقه مع المكوّنات.

أسماء الأصناف المساعدة التي تحصل عليها

كل متغيّر تصميم يصبح صنفًا مساعدًا، بالأسماء نفسها التي تستخدمها المكوّنات.

المتغيّر, الأصناف المساعدة
المتغيّر	الأصناف المساعدة
`--tc-page`	`bg-page`
`--tc-surface--tc-surface-raised`	`bg-surfacebg-surface-raised`
`--tc-body`	`text-body`
`--tc-muted`	`text-muted`
`--tc-line--tc-line-strong`	`border-lineborder-line-strong`
`--tc-overlay`	`bg-overlay`
`--tc-ring`	`outline-ring`
`--tc-primary-solid--tc-primary-on-solid--tc-primary-soft--tc-primary-on-soft`	`bg-primary-solidtext-primary-on-solidbg-primary-softtext-primary-on-soft`
`--tc-neutral-solid--tc-neutral-on-solid--tc-neutral-soft--tc-neutral-on-soft`	`bg-neutral-solidtext-neutral-on-solidbg-neutral-softtext-neutral-on-soft`
`--tc-success-solid--tc-success-on-solid--tc-success-soft--tc-success-on-soft`	`bg-success-solidtext-success-on-solidbg-success-softtext-success-on-soft`
`--tc-warning-solid--tc-warning-on-solid--tc-warning-soft--tc-warning-on-soft`	`bg-warning-solidtext-warning-on-solidbg-warning-softtext-warning-on-soft`
`--tc-danger-solid--tc-danger-on-solid--tc-danger-soft--tc-danger-on-soft`	`bg-danger-solidtext-danger-on-solidbg-danger-softtext-danger-on-soft`
`--tc-info-solid--tc-info-on-solid--tc-info-soft--tc-info-on-soft`	`bg-info-solidtext-info-on-solidbg-info-softtext-info-on-soft`
`--spacing-control-xs--spacing-control-sm--spacing-control-md--spacing-control-lg--spacing-control-xl`	`h-control-xsh-control-smh-control-mdh-control-lgh-control-xl`
`--spacing-toggle-xs--spacing-toggle-sm--spacing-toggle-md--spacing-toggle-lg--spacing-toggle-xl`	`size-toggle-xssize-toggle-smsize-toggle-mdsize-toggle-lgsize-toggle-xl`
`--spacing-icon-xs--spacing-icon-sm--spacing-icon-md--spacing-icon-lg--spacing-icon-xl`	`size-icon-xssize-icon-smsize-icon-mdsize-icon-lgsize-icon-xl`
`--spacing-pad-x-xs--spacing-pad-x-sm--spacing-pad-x-md--spacing-pad-x-lg--spacing-pad-x-xl`	`px-pad-x-xspx-pad-x-smpx-pad-x-mdpx-pad-x-lgpx-pad-x-xl`
`--spacing-pad-y-xs--spacing-pad-y-sm--spacing-pad-y-md--spacing-pad-y-lg--spacing-pad-y-xl`	`py-pad-y-xspy-pad-y-smpy-pad-y-mdpy-pad-y-lgpy-pad-y-xl`
`--tc-radius--radius-box--radius-chip`	`rounded-controlrounded-boxrounded-chip`
`--tc-font-sans--tc-font-mono`	`font-sansfont-mono`

تغيير قيمة متغيّر

عرّف المتغيّر بعد الاستيرادات الثلاثة. لا شيء يفحص التباين لقيمة تضعها بنفسك.

app/globals.css

@import "topclassui/styles.css";

:root {
  --tc-primary-solid: var(--color-emerald-700);
  --tc-primary-on-solid: var(--color-white);
  --tc-primary-on-soft: var(--color-emerald-700);
  --tc-radius: 0.75rem;
}

إذا كان الترتيب خاطئًا

ترتيب طبقات Tailwind يحدّده الاستيراد الأول. إذا فتحت طبقة قبله، تخسر المكوّنات أمام إعادة الضبط الأساسية.

خطأ

@import "topclassui/styles.css";
@import "tailwindcss";

/* the components layer is opened before Tailwind's layer
   order statement, so it sinks below base and the resets win */

صواب

@import "tailwindcss";
@import "topclassui/tokens.css";
@import "topclassui/styles.css";

مع Vite

مع Vite تنطبق الأسطر الثلاثة نفسها، مع @tailwindcss/vite في قائمة الإضافات بدلًا من PostCSS. الإعداد موجود في صفحة تثبيت الحزمة.

التاليالمزوّد