ورقة مرجعية لـ Tailwind CSS

جميع الأدوات
مجاني

مرجع Tailwind CSS قابل للبحث والطباعة — التخطيط وflexbox والشبكة والتباعد والطباعة والألوان والحالات والبادئات المتجاوبة. مجاني.

Layout

12
container mx-auto px-4
Centered max-width page container
block / inline-block / inline
Display modes
flex / grid / hidden
Flexbox, grid, or display:none
relative / absolute / fixed / sticky
Position modes
inset-0
top/right/bottom/left: 0
top-4 right-2 bottom-0 left-1/2
Offset a positioned element
z-10 / z-50 / z-[999]
Stacking order (z-index)
overflow-hidden / overflow-y-auto
Clip or scroll overflowing content
float-right / clear-both
Floats (rarely needed)
box-border / box-content
Box sizing model
isolation-isolate
New stacking context
object-cover object-center
Image fill behavior (like bg-size)

Flexbox

12
flex flex-row / flex-col
Flex container + direction
flex-wrap / flex-nowrap
Allow or prevent wrapping
items-center / items-start / items-end
Cross-axis alignment
justify-center / justify-between
Main-axis distribution
justify-start / justify-end / justify-around
More main-axis options
gap-4 / gap-x-2 / gap-y-6
Gap between flex/grid children
flex-1
Grow and shrink to fill space
flex-none / flex-auto
Fixed size / natural + grow
grow / grow-0 / shrink-0
Individual grow/shrink control
basis-1/2 / basis-64
Initial main size (flex-basis)
self-center / self-stretch
Per-item cross alignment
order-first / order-2 / order-last
Visual reordering

Grid

12
grid grid-cols-3 gap-4
3-column grid with gaps
grid-cols-[200px_1fr]
Custom track sizes (arbitrary)
col-span-2 / col-span-full
Item spans columns
col-start-2 col-end-4
Explicit column placement
grid-rows-3 / row-span-2
Row tracks and spans
grid-flow-col / grid-flow-dense
Auto-placement direction
auto-cols-fr / auto-rows-min
Implicit track sizing
place-items-center
Center items both axes
place-content-center
Center the whole grid content
justify-items-start / content-end
Fine-grained grid alignment
grid-cols-[repeat(auto-fill,minmax(250px,1fr))]
Responsive card grid, no media queries
subgrid
Inherit parent tracks (v4)

Spacing

11
p-4
Padding all sides (1rem)
px-4 py-2
Horizontal / vertical padding
pt-2 pr-4 pb-6 pl-8
Per-side padding
m-4 / mx-auto
Margin / horizontal centering
-mt-4
Negative margin
space-y-4
Vertical gap between children
space-x-2
Horizontal gap between children
p-0 p-px p-0.5 p-1 ... p-96
Scale: 1 unit = 0.25rem (4px)
p-[18px]
Arbitrary padding value
ps-4 / pe-4 / ms-auto
Logical (RTL-aware) start/end
scroll-mt-24
Anchor offset under fixed header

Sizing

11
w-full / w-screen
100% width / viewport width
w-1/2 w-1/3 w-2/3 w-1/4
Fractional widths
w-64 / w-px / w-[137px]
Fixed widths (scale or arbitrary)
max-w-md / max-w-prose / max-w-7xl
Max width presets
min-w-0
Allow flex children to shrink
h-full / h-screen / h-dvh
Full height (dvh = mobile-safe)
min-h-screen
At least viewport height
max-h-96 overflow-y-auto
Capped height, scroll inside
size-10
Width + height together
w-fit / w-max / w-min
Content-based widths
aspect-square / aspect-video
Aspect ratio boxes

Typography

13
text-xs text-sm text-base text-lg text-xl
Font size scale (up to 9xl)
font-normal font-medium font-semibold font-bold
Font weights
italic / not-italic
Font style
text-left / text-center / text-right
Text alignment
leading-tight / leading-relaxed
Line height
tracking-tight / tracking-wide
Letter spacing
uppercase / capitalize / normal-case
Text transform
underline / line-through / no-underline
Text decoration
truncate
One line + ellipsis
whitespace-nowrap / break-words
Wrapping control
font-sans / font-serif / font-mono
Font family stacks
tabular-nums
Fixed-width digits (tables)
text-balance / text-pretty
Nicer heading/paragraph wraps

Colors & backgrounds

12
text-gray-700 / text-blue-600
Text color (shades 50–950)
bg-white / bg-slate-900
Background color
bg-blue-500/50
Color with 50% opacity
text-white bg-black
Plain black and white
bg-transparent / bg-current
Transparent / currentColor
bg-gradient-to-r from-blue-500 to-purple-600
Linear gradient
via-pink-500
Gradient middle stop
bg-cover bg-center bg-no-repeat
Background image sizing
bg-[url('/img/hero.jpg')]
Arbitrary background image
text-[#1da1f2]
Arbitrary hex color
accent-blue-600
Checkbox / radio accent color
fill-current / stroke-current
SVG inherits text color

Borders, radius & shadows

12
border border-gray-200
1px border with color
border-2 / border-t / border-b-4
Width and per-side borders
border-dashed / border-dotted
Border style
rounded / rounded-lg / rounded-full
Border radius
rounded-t-xl / rounded-l-none
Per-corner/side radius
shadow-sm shadow-md shadow-lg shadow-xl
Box shadow scale
shadow-none
Remove shadow
shadow-blue-500/50
Colored shadow
ring-2 ring-blue-500 ring-offset-2
Focus ring (outline-like)
outline-none focus-visible:ring-2
Accessible focus styling
divide-y divide-gray-200
Borders between children
border-[3px] rounded-[14px]
Arbitrary border values

States & responsive prefixes

14
hover:bg-blue-600
On hover
focus:ring-2 / focus-visible:ring-2
On focus (keyboard-aware)
active:scale-95
While pressed
disabled:opacity-50
Disabled form elements
sm: md: lg: xl: 2xl:
Breakpoints 640/768/1024/1280/1536
hidden md:block
Show only from md upward
flex-col md:flex-row
Stack on mobile, row on desktop
dark:bg-gray-900 dark:text-white
Dark mode variant
group + group-hover:opacity-100
Style child on parent hover
peer + peer-checked:block
Style sibling by input state
first:pt-0 last:pb-0 odd:bg-gray-50
Structural pseudo-classes
max-md:hidden
Below a breakpoint only
md:hover:bg-blue-700
Stack variants (order matters)
motion-reduce:transition-none
Respect reduced motion

Transitions & animation

12
transition
Animate common properties
transition-colors duration-200
Only colors, 200ms
duration-75 ... duration-1000
Transition duration scale
ease-in / ease-out / ease-in-out
Timing functions
delay-150
Transition delay
hover:scale-105 transition-transform
Grow slightly on hover
rotate-45 / -rotate-90
Rotation
translate-x-4 / -translate-y-1/2
Translation
animate-spin
Loading spinner rotation
animate-pulse
Skeleton loading pulse
animate-bounce / animate-ping
Bounce / radar ping
will-change-transform
Hint for smoother animation

Component recipes

13
flex items-center justify-center
Center anything (flex)
grid place-items-center
Center anything (grid)
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
Absolute centering
truncate
Single-line ellipsis (needs width)
line-clamp-3
Multi-line clamp with ellipsis
aspect-video w-full object-cover
16:9 media that fills its box
sticky top-0 z-50 bg-white/80 backdrop-blur
Frosted sticky header
fixed inset-0 bg-black/50
Modal backdrop overlay
rounded-xl border bg-white p-6 shadow-sm
Basic card
inline-flex items-center gap-2 rounded-lg px-4 py-2
Button base (icon + label)
sr-only
Visually hidden, screen-reader OK
divide-y > li py-3
Clean list with separators
min-h-screen flex flex-col + footer mt-auto
Sticky footer layout

Config & arbitrary values

13
w-[137px] / top-[13%]
Arbitrary value in brackets
bg-[#bada55] / text-[22px]
Arbitrary color / font size
grid-cols-[1fr_2fr_1fr]
Underscores stand for spaces
w-[calc(100%-2rem)]
calc() in arbitrary values
text-(--brand-color)
CSS variable shorthand (v4)
[&>li]:mt-2
Arbitrary variant (child selector)
[&:nth-child(3)]:bg-red-100
Arbitrary pseudo selector
has-[:checked]:ring-2
Parent styled by descendant
data-[state=open]:rotate-180
Style by data attribute
@theme { --color-brand: #1e40af; }
v4: design tokens in CSS
theme.extend.colors.brand (v3)
v3: extend tailwind.config.js
@apply flex items-center gap-2;
Reuse utilities in CSS (sparingly)
!mt-0 (v3) / mt-0! (v4)
Important modifier

لا يوجد إدخال يطابق “:q”.

حول ورقة مرجعية لـ Tailwind CSS

تسرد ورقة الغش هذه لـ Tailwind CSS فئات الأدوات (utility classes) التي تستخدمها يوميًا في صفحة واحدة قابلة للبحث: التخطيط، وflexbox، والشبكة، والتباعد، والأبعاد، والطباعة، والألوان والخلفيات، والحدود، ونصف القطر والظلال، وبادئات الحالة والاستجابة، والانتقالات والحركة، ووصفات المكوّنات، والإعدادات إضافةً إلى القيم الاعتباطية.

يقرن كل صف الفئة بما تفعله فعليًا، فتعمل كجدول ترجمة في الاتجاهين — يمكنك البحث عن الأداة المقابلة لخاصية CSS تعرفها، أو التحقق مما تفعله فئة غير مألوفة في ترميز شخص آخر.

الورقة مجانية وتعمل من جانب العميل: صفِّ الصفوف مباشرة عبر مربع البحث، وتنقّل بين الأقسام عبر جدول المحتويات الملتصق، وانسخ أي فئة بنقرة واحدة، واطبع الصفحة كمرجع على مكتبك.

كيفية استخدام ورقة مرجعية لـ Tailwind CSS

  1. تصفّح الأقسام سريعًا، من «التخطيط» و«Flexbox» مرورًا بـ«الألوان والخلفيات» وصولًا إلى «الإعدادات والقيم الاعتباطية».
  2. ابحث عن فئة أو خاصية CSS مثل justify أو gap أو shadow لتصفية الورقة مباشرة.
  3. انتقل إلى «بادئات الحالة والاستجابة» لمتغيرات hover وfocus والوضع الداكن ونقاط التوقف.
  4. انقر على فئة أو أيقونة النسخ الخاصة بها لنسخها إلى الحافظة.
  5. اطبع الورقة للحصول على مرجع Tailwind يعمل دون اتصال.

الأسئلة الشائعة

اثنا عشر قسمًا: التخطيط، وflexbox، والشبكة، والتباعد، والأبعاد، والطباعة، والألوان والخلفيات، والحدود، ونصف القطر والظلال، وبادئات الحالة والاستجابة، والانتقالات والحركة، ووصفات المكوّنات، والإعدادات إضافةً إلى القيم الاعتباطية.

نعم. يغطي قسم مخصص نقاط التوقف sm: و md: و lg: و xl: إلى جانب متغيرات hover: و focus: و active: و disabled: و group-hover: و dark:.

يجمّع قسم وصفات المكوّنات أنماطًا شائعة — بطاقة، وزر، وحاوية موسّطة، وشبكة متجاوبة — من الأدوات الموجودة في بقية الورقة.

نعم. انقر على أي صف أو على أيقونة النسخ الخاصة به وستصل الفئة إلى حافظتك مع تأكيد موجز.

نعم، مجاني تمامًا — قابل للبحث والطباعة ويُعرض في متصفحك دون تسجيل.
شارك هذا
أدوات ذات صلة
ورقة CSS المرجعية مرجع CSS قابل للبحث والطباعة — المحددات ونموذج الصندوق وflexbox وgrid والطباعة والانتقالات والميزات الحديثة. مجاني. مجاني
ورقة Bootstrap المرجعية مرجع Bootstrap 5.3 قابل للبحث والطباعة — الشبكة، التباعد، الطباعة، الألوان، أدوات flex، الأزرار، النماذج والمكوّنات. مجانًا. مجاني
ورقة SASS المرجعية مرجع Sass / SCSS قابل للبحث والطباعة — المتغيرات، التداخل، وحدات @use، المخاليط، الدوال، التحكم في التدفق والوحدات المدمجة. مجانًا. مجاني
ورقة JavaScript المرجعية مرجع قابل للبحث والطباعة لـ JavaScript الحديثة — البنية والمصفوفات والسلاسل والكائنات وasync/await وDOM وميزات ES2022+. مجاني. مجاني
ورقة PHP المرجعية مرجع PHP 8.3+ قابل للبحث والطباعة — البنية والسلاسل والمصفوفات والدوال والأصناف والتعدادات والخصائص والميزات الحديثة. مجاني. مجاني
ورقة MySQL المرجعية مرجع MySQL قابل للبحث والطباعة — الاستعلامات والوصلات والفهارس والدوال وأنواع البيانات وأوامر الإدارة. مجاني. مجاني
عمليات البحث الشائعة
tailwind cheat sheet فئات tailwind css فئات tailwind flex فئات tailwind grid مقياس تباعد tailwind بادئات tailwind المتجاوبة مرجع tailwind css
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.