Tailwind CSS Cheat Sheet (Table Format)
Tailwind CSS Cheat Sheet (Table Format) · from Anas-Magane/Pentesting (SECURE_CODING).
Typography (النصوص)#
| الوصف | الكلاس |
|---|---|
| حجم صغير للنص | text-sm |
| حجم عادي | text-base |
| حجم متوسط | text-lg |
| حجم كبير | text-xl |
| أكبر | text-2xl → text-6xl |
| الوزن ثقيل | font-bold |
| الوزن عادي | font-normal |
| محاذاة وسط | text-center |
| محاذاة يسار | text-left |
| محاذاة يمين | text-right |
| لون أبيض | text-white |
| لون رمادي | text-gray-500 |
Background (الخلفية)#
| الوصف | الكلاس |
|---|---|
| خلفية بيضاء | bg-white |
| خلفية سوداء | bg-black |
| خلفية رمادية | bg-gray-100 → bg-gray-900 |
| خلفية زرقاء | bg-blue-500 |
| خلفية حمراء | bg-red-500 |
Spacing (المسافات)#
| الوصف | الكلاس |
|---|---|
| Padding الكل | p-4 |
| Padding عمودي | py-4 |
| Padding أفقي | px-4 |
| Margin الكل | m-4 |
| Margin فوق | mt-4 |
| Margin تحت | mb-4 |
| Margin يسار | ml-4 |
| Margin يمين | mr-4 |
Borders & Radius (الإطار والزوايا)#
| الوصف | الكلاس |
|---|---|
| حواف مدورة خفيفة | rounded-sm |
| حواف مدورة | rounded |
| حواف مدورة كبيرة | rounded-lg |
| حواف دائرية كلياً | rounded-full |
| إطار عادي | border |
| إطار بلون رمادي | border-gray-300 |
| بدون إطار | border-none |
Flexbox و Grid#
| الوصف | الكلاس |
|---|---|
| تفعيل Flex | flex |
| اتجاه عمودي | flex-col |
| اتجاه أفقي | flex-row |
| وسط عمودياً | items-center |
| وسط أفقياً | justify-center |
| توزيع المسافات | justify-between |
| Grid بـ 2 أعمدة | grid grid-cols-2 |
| Grid بـ 3 أعمدة | grid grid-cols-3 |
| فراغ بين العناصر | gap-4 |
Sizing (الأحجام)#
| الوصف | الكلاس |
|---|---|
| عرض كامل | w-full |
| عرض 50% | w-1/2 |
| ارتفاع تلقائي | h-auto |
| ارتفاع 100% | h-full |
Buttons (الأزرار)#
| الوصف | الكلاس |
|---|---|
| خلفية زرقاء | bg-blue-500 |
| تكبير عند hover | hover:bg-blue-600 |
| لون نص أبيض | text-white |
| Padding داخلي | px-4 py-2 |
| زوايا مدورة | rounded |
Shadow (الظل)#
| الوصف | الكلاس |
|---|---|
| ظل خفيف | shadow-sm |
| ظل متوسط | shadow-md |
| ظل كبير | shadow-lg |
| بدون ظل | shadow-none |
Responsive (التجاوب مع الشاشات)#
| الوصف | الكلاس |
|---|---|
| حجم خط صغير فـ mobile | text-sm |
| حجم خط كبير فـ md screen | md:text-2xl |
| margin فوق فقط فـ lg screen | lg:mt-8 |
| padding أفقي فـ xl screen | xl:px-10 |
Transition و Hover#
| الوصف | الكلاس |
|---|---|
| تفعيل الترانزيشن | transition |
| ترانزيشن الألوان | transition-colors |
| تأثير hover | hover:bg-gray-200 |
| تغيير الحجم عند hover | hover:scale-105 |
Display (أنواع العرض)#
| الوصف | الكلاس |
|---|---|
| عرض block | block |
| عرض inline | inline |
| عرض inline-block | inline-block |
| عرض none (إخفاء العنصر) | hidden |
Position (الوضعية)#
| الوصف | الكلاس |
|---|---|
| الوضع الافتراضي | static |
| الوضع النسبي | relative |
| الوضع المطلق | absolute |
| مثبت (فوق الشاشة) | fixed |
| sticky | sticky |
| top 0 | top-0 |
| left 0 | left-0 |
Overflow (التجاوز)#
| الوصف | الكلاس |
|---|---|
| إخفاء المحتوى الزائد | overflow-hidden |
| إظهار scroll | overflow-scroll |
| إظهار تلقائي | overflow-auto |
| فقط أفقي | overflow-x-auto |
| فقط عمودي | overflow-y-auto |
Z-Index#
| الوصف | الكلاس |
|---|---|
| لا شيء | z-0 |
| فوق المستوى | z-10 |
| أعلى | z-50 |
| تلقائي | z-auto |
Opacity (الشفافية)#
| الوصف | الكلاس |
|---|---|
| بدون شفافية | opacity-100 |
| نصف شفاف | opacity-50 |
| مخفي بزاف | opacity-0 |
| قابل للتغيير hover | hover:opacity-75 |
Cursors (شكل السهم)#
| الوصف | الكلاس |
|---|---|
| السهم العادي | cursor-default |
| اليد عند hover | cursor-pointer |
| لا يمكن النقر عليه | cursor-not-allowed |
Text Decoration#
| الوصف | الكلاس |
|---|---|
| تحت النص (underline) | underline |
| بدون خط | no-underline |
| فوق النص (line-through) | line-through |
Dark Mode#
| الوصف | الكلاس |
|---|---|
| لون النص فقط فـ dark mode | dark:text-white |
| خلفية فقط فـ dark mode | dark:bg-zinc-800 |
| تغيير لون فـ hover + dark | dark:hover:bg-gray-700 |
Aspect Ratio (نسبة العرض والارتفاع)#
| الوصف | الكلاس |
|---|---|
| مربع | aspect-square |
| 16:9 | aspect-video |
| 4:3 | aspect-[4/3] |
Ring (إطار خارجي)#
| الوصف | الكلاس |
|---|---|
| خط خارجي خفيف | ring |
| خط خارجي بلون خاص | ring-blue-500 |
| إزالة الخط الخارجي | ring-0 |
Font Style#
| الوصف | الكلاس |
|---|---|
| مائل (Italic) | italic |
| بدون ميلان | not-italic |
| تحويل النص لكابيتال | uppercase |
| لحروف صغيرة | lowercase |
| كل كلمة بحرف كبير | capitalize |
Transition Timing (مدة التحول)#
| الوصف | الكلاس |
|---|---|
| ترانزيشن سريع | duration-100 |
| ترانزيشن متوسط | duration-300 |
| ترانزيشن بطيء | duration-700 |
| تأخير الترانزيشن | delay-200 |
Transform#
| الوصف | الكلاس |
|---|---|
| تفعيل التحول | transform |
| تكبير الحجم | scale-105 |
| تدوير | rotate-6 |
| التحريك X (يمين/يسار) | translate-x-2 |
| التحريك Y (فوق/تحت) | translate-y-2 |