Tailwind CSS চিট শিট

বিনামূল্যে

একটি অনুসন্ধানযোগ্য, প্রিন্টযোগ্য Tailwind CSS রেফারেন্স: লেআউট, flexbox, grid, স্পেসিং, টাইপোগ্রাফি, রং, স্টেট ও রেসপন্সিভ প্রিফিক্স। বিনামূল্যে।

Layout

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

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

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

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

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

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

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

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

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

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

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

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 চিট শিট আপনি প্রতিদিন যে ইউটিলিটি ক্লাসগুলোর জন্য হাত বাড়ান তা একটি অনুসন্ধানযোগ্য পৃষ্ঠায় তালিকাভুক্ত করে: লেআউট, flexbox, grid, স্পেসিং, সাইজিং, টাইপোগ্রাফি, রং ও ব্যাকগ্রাউন্ড, বর্ডার, radius ও shadow, স্টেট ও রেসপন্সিভ প্রিফিক্স, ট্রানজিশন ও অ্যানিমেশন, কম্পোনেন্ট রেসিপি, এবং config ও নির্বিচার মান।

প্রতিটি সারি ক্লাসকে এটি প্রকৃতপক্ষে কী করে তার সাথে জোড়া লাগায়, তাই এটি উভয় দিকেই একটি অনুবাদ টেবিল হিসেবে কাজ করে: আপনি জানা একটি CSS প্রপার্টির জন্য ইউটিলিটি খুঁজে দেখতে পারেন, অথবা অন্য কারো মার্কআপে একটি অপরিচিত ক্লাস কী করছে তা পরীক্ষা করতে পারেন।

শিটটি বিনামূল্যে এবং ক্লায়েন্ট-সাইড: সার্চ বক্স দিয়ে লাইভ সারি ফিল্টার করুন, স্টিকি সূচিপত্র দিয়ে বিভাগগুলোর মধ্যে লাফ দিন, এক ক্লিকে যেকোনো ক্লাস কপি করুন এবং একটি ডেস্ক রেফারেন্স হিসেবে পৃষ্ঠাটি প্রিন্ট করুন।

Tailwind CSS চিট শিট কীভাবে ব্যবহার করবেন

বিভাগগুলো দেখুন, Layout ও Flexbox থেকে Colors & backgrounds হয়ে Config & arbitrary values পর্যন্ত।
শিটটি লাইভ ফিল্টার করতে justify, gap বা shadow-এর মতো একটি ক্লাস বা CSS প্রপার্টি অনুসন্ধান করুন।
hover, focus, dark mode এবং breakpoint ভ্যারিয়েন্টের জন্য States & responsive prefixes-এ যান।
একটি ক্লাস বা এর কপি আইকনে ক্লিক করে এটি আপনার ক্লিপবোর্ডে কপি করুন।
অফলাইন Tailwind রেফারেন্সের জন্য শিটটি প্রিন্ট করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

বারোটি বিভাগ: লেআউট, flexbox, grid, স্পেসিং, সাইজিং, টাইপোগ্রাফি, রং ও ব্যাকগ্রাউন্ড, বর্ডার, radius ও shadow, স্টেট ও রেসপন্সিভ প্রিফিক্স, ট্রানজিশন ও অ্যানিমেশন, কম্পোনেন্ট রেসিপি, এবং config ও নির্বিচার মান।

হ্যাঁ। একটি নিবেদিত বিভাগ sm:, md:, lg: এবং xl: breakpoint-এর পাশাপাশি hover:, focus:, active:, disabled:, group-hover: এবং dark: ভ্যারিয়েন্ট কভার করে।

কম্পোনেন্ট রেসিপি বিভাগটি শিটের বাকি অংশের ইউটিলিটি থেকে সাধারণ প্যাটার্ন (একটি কার্ড, একটি বোতাম, একটি কেন্দ্রীভূত কন্টেইনার, একটি রেসপন্সিভ গ্রিড) একত্রিত করে।

হ্যাঁ। যেকোনো সারিতে বা এর কপি আইকনে ক্লিক করুন এবং ক্লাসটি একটি সংক্ষিপ্ত নিশ্চিতকরণসহ আপনার ক্লিপবোর্ডে চলে যায়।

হ্যাঁ, সম্পূর্ণ বিনামূল্যে: অনুসন্ধানযোগ্য, প্রিন্টযোগ্য এবং কোনো সাইন-আপ ছাড়াই আপনার ব্রাউজারে রেন্ডার করা।

Tailwind CSS চিট শিট

Layout

Flexbox

Grid

Spacing

Sizing

Typography

Colors & backgrounds

Borders, radius & shadows

States & responsive prefixes

Transitions & animation

Component recipes

Config & arbitrary values

Tailwind CSS চিট শিট সম্পর্কে

Tailwind CSS চিট শিট কীভাবে ব্যবহার করবেন

সচরাচর জিজ্ঞাসিত প্রশ্ন

Tailwind চিট শিটে কী অন্তর্ভুক্ত?

এটি কি রেসপন্সিভ ও স্টেট প্রিফিক্স ব্যাখ্যা করে?

প্রস্তুত কম্পোনেন্ট উদাহরণ কি আছে?

আমি কি এক ক্লিকে একটি ক্লাস কপি করতে পারি?

Tailwind রেফারেন্স কি বিনামূল্যে?

সম্পর্কিত টুলসমূহ

জনপ্রিয় অনুসন্ধান

এই টুলটি এম্বেড করুন