Tailwind CSS چیٹ شیٹ
قابل تلاش، قابل پرنٹ Tailwind CSS حوالہ: لے آؤٹ، فلیکس باکس، گرڈ، اسپیسنگ، ٹائپوگرافی، رنگ، سٹیٹس اور ریسپانسو پریفکسز۔ مفت۔
Layout
12container 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
12flex 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
12grid 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
11p-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
11w-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
13text-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
12text-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
12border 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
14hover: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
12transition
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
13flex 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
13w-[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 چیٹ شیٹ وہ یوٹیلیٹی کلاسز ایک قابل تلاش صفحے پر درج کرتی ہے جو آپ روزانہ استعمال کرتے ہیں: لے آؤٹ، فلیکس باکس، گرڈ، اسپیسنگ، سائزنگ، ٹائپوگرافی، رنگ اور بیک گراؤنڈز، بارڈرز، ریڈیئس اور شیڈوز، سٹیٹ اور ریسپانسو پریفکسز، ٹرانزیشنز اور اینیمیشن، کمپونینٹ ترکیبیں، اور کنفیگ کے ساتھ من مانی ویلیوز۔
ہر قطار کلاس کو اس کے اصل کام کے ساتھ جوڑتی ہے، اس لیے یہ دونوں سمتوں میں ترجمے کی جدول کا کام دیتی ہے: آپ کسی جانی پہچانی CSS پراپرٹی کے لیے یوٹیلیٹی تلاش کر سکتے ہیں، یا کسی اور کے مارک اپ میں نامانوس کلاس کا کام جانچ سکتے ہیں۔
شیٹ مفت اور کلائنٹ سائیڈ ہے: سرچ باکس سے قطاروں کو لائیو فلٹر کریں، چپکے رہنے والی فہرست مضامین سے حصوں کے درمیان کودیں، ایک کلک سے کوئی بھی کلاس کاپی کریں اور میز کے حوالے کے طور پر صفحہ پرنٹ کریں۔
Tailwind CSS چیٹ شیٹ استعمال کرنے کا طریقہ
- حصوں پر نظر ڈالیں، Layout اور Flexbox سے لے کر Colors & backgrounds سے ہوتے ہوئے Config & arbitrary values تک۔
- justify، gap یا shadow جیسی کوئی کلاس یا CSS پراپرٹی تلاش کریں تاکہ شیٹ لائیو فلٹر ہو جائے۔
- hover، focus، ڈارک موڈ اور بریک پوائنٹ ویریئنٹس کے لیے States & responsive prefixes پر جائیں۔
- کلاس کو اپنی کلپ بورڈ پر کاپی کرنے کے لیے اس پر یا اس کے کاپی آئیکن پر کلک کریں۔
- آف لائن Tailwind حوالے کے لیے شیٹ پرنٹ کریں۔
اکثر پوچھے جانے والے سوالات
بارہ حصے: لے آؤٹ، فلیکس باکس، گرڈ، اسپیسنگ، سائزنگ، ٹائپوگرافی، رنگ اور بیک گراؤنڈز، بارڈرز، ریڈیئس اور شیڈوز، سٹیٹس اور ریسپانسو پریفکسز، ٹرانزیشنز اور اینیمیشن، کمپونینٹ ترکیبیں، اور کنفیگ کے ساتھ من مانی ویلیوز۔
جی ہاں۔ ایک مخصوص حصہ sm:، md:، lg: اور xl: بریک پوائنٹس کے ساتھ hover:، focus:، active:، disabled:، group-hover: اور dark: ویریئنٹس کا احاطہ کرتا ہے۔
کمپونینٹ ترکیبوں کا حصہ عام پیٹرنز (کارڈ، بٹن، مرکز میں رکھا کنٹینر، ریسپانسو گرڈ) کو شیٹ کے باقی حصوں کی یوٹیلیٹیز سے جوڑ کر دکھاتا ہے۔
جی ہاں۔ کسی بھی قطار یا اس کے کاپی آئیکن پر کلک کریں اور کلاس مختصر تصدیق کے ساتھ آپ کی کلپ بورڈ پر پہنچ جاتی ہے۔
جی ہاں، مکمل طور پر مفت: قابل تلاش، قابل پرنٹ اور بغیر سائن اپ کے آپ کے براؤزر میں رینڈر ہوتا ہے۔
مقبول تلاشیں
tailwind چیٹ شیٹ
tailwind css کلاسز
tailwind flex کلاسز
tailwind grid کلاسز
tailwind اسپیسنگ اسکیل
tailwind ریسپانسو پریفکسز
tailwind css حوالہ
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔