🌊 Modern CSS ও Tailwind CSS

Utility-first CSS framework — HTML-এ সরাসরি class দিয়ে দ্রুত সুন্দর UI তৈরি করো।

🔷 Tailwind CSS কী?

Tailwind CSS হলো একটি utility-first CSS framework। Bootstrap-এর মতো ready-made component না দিয়ে এটি ছোট ছোট utility class দেয় যেগুলো HTML-এ সরাসরি ব্যবহার করে যেকোনো design তৈরি করা যায়।

Traditional CSS বনাম Tailwind CSS

/* Traditional CSS */ .card { background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Tailwind CSS — একই কাজ HTML-এ */ <div class="bg-white rounded-lg p-4 shadow-md"> ... </div>

✅ Tailwind-এর মূল সুবিধা:

Custom CSS লেখার দরকার কমে যায় → Class নাম ভাবতে হয় না → Design system automatically consistent থাকে → Build-এ unused CSS automatically বাদ যায় (tiny file size)

🔷 Tailwind CSS vs Bootstrap vs Traditional CSS

বিষয়	Traditional CSS	Bootstrap	Tailwind CSS
Approach	নিজে সব লেখো	Ready component	Utility classes
Customization	সম্পূর্ণ স্বাধীন	কঠিন override	সহজ, CSS variable
File size	যা লিখবে তাই	বড় (unused CSS)	ছোট (purge করে)
Design system	নিজে বানাতে হয়	Bootstrap look	নিজস্ব theme
Learning curve	মধ্যম	সহজ	মধ্যম
Popularity (2025)	সবসময় চলে	কমছে	⭐ সবচেয়ে জনপ্রিয়

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

⚙️ Installation — Tailwind CSS Setup করো

Tailwind CSS v4 ইনস্টল করার বিভিন্ন উপায়।

🔷 Vite দিয়ে Install (সবচেয়ে জনপ্রিয়)

# ১. Vite project তৈরি করো npm create vite@latest my-project cd my-project # ২. Tailwind CSS ও Vite plugin install করো npm install tailwindcss @tailwindcss/vite # ৩. vite.config.js-এ plugin যোগ করো import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) # ৪. CSS ফাইলে import করো (main CSS file-এ) @import "tailwindcss"; # ৫. Dev server চালাও npm run dev

🔷 PostCSS দিয়ে Install

# ১. Install করো npm install tailwindcss @tailwindcss/postcss postcss # ২. postcss.config.js তৈরি করো export default { plugins: { "@tailwindcss/postcss": {}, }, } # ৩. CSS-এ import করো @import "tailwindcss";

🔷 CDN দিয়ে (শুধু Practice-এর জন্য)

<script src="https://cdn.tailwindcss.com"></script>  <div class="bg-blue-500 text-white p-4 rounded-lg"> Hello Tailwind! </div>

⚠️ CDN শুধু শেখার জন্য। Production-এ সবসময় npm দিয়ে install করো।

🔷 Tailwind Play — Browser-এ Practice করো

# Browser-এ সরাসরি Tailwind try করো: # https://play.tailwindcss.com # কোনো install ছাড়াই live preview দেখা যায় # নতুনদের জন্য সেরা শেখার জায়গা

✅ Tailwind Play → play.tailwindcss.com — যেকোনো class লেখো, instant preview পাও।

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🧩 Utility-First Concept

Tailwind-এর মূল দর্শন বোঝো — কেন utility class এত কার্যকর।

🔷 একটি Card তৈরি — উদাহরণ

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> <img class="w-full h-48 object-cover" src="photo.jpg" alt="Profile" /> <div class="p-6"> <h2 class="text-xl font-bold text-gray-900">ফরীদুর রহমান</h2> <p class="text-gray-600 mt-1">Full Stack Developer</p> <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors"> Connect </button> </div> </div>

🔷 Naming Convention — Class নামের নিয়ম

# প্যাটার্ন: property-value text-lg → font-size: large text-blue-500 → color: blue (shade 500) bg-gray-100 → background-color: gray-100 p-4 → padding: 1rem (4 × 0.25rem) m-2 → margin: 0.5rem w-1/2 → width: 50% h-screen → height: 100vh flex → display: flex hidden → display: none rounded-full → border-radius: 9999px (circle) opacity-75 → opacity: 0.75

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔤 Typography

Text formatting-এর সব utility class।

🔷 Font Size

text-xs → 0.75rem (12px) text-sm → 0.875rem (14px) text-base → 1rem (16px) ← default text-lg → 1.125rem (18px) text-xl → 1.25rem (20px) text-2xl → 1.5rem (24px) text-3xl → 1.875rem (30px) text-4xl → 2.25rem (36px) text-5xl → 3rem (48px) text-6xl → 3.75rem (60px) text-7xl → 4.5rem (72px) text-8xl → 6rem (96px) text-9xl → 8rem (128px)  <h1 class="text-4xl font-bold">বড় শিরোনাম</h1> <p class="text-base text-gray-700">সাধারণ paragraph</p> <small class="text-sm text-gray-500">ছোট নোট</small>

🔷 Font Weight, Style ও Decoration

# Font Weight font-thin → font-weight: 100 font-light → font-weight: 300 font-normal → font-weight: 400 font-medium → font-weight: 500 font-semibold → font-weight: 600 font-bold → font-weight: 700 font-extrabold → font-weight: 800 font-black → font-weight: 900 # Font Style italic → font-style: italic not-italic → font-style: normal # Text Decoration underline → text-decoration: underline line-through → text-decoration: line-through no-underline → text-decoration: none decoration-blue-500 → underline color # Text Transform uppercase → text-transform: uppercase lowercase → text-transform: lowercase capitalize → text-transform: capitalize

🔷 Text Alignment ও Line Height

# Alignment text-left → text-align: left text-center → text-align: center text-right → text-align: right text-justify → text-align: justify # Line Height leading-none → line-height: 1 leading-tight → line-height: 1.25 leading-snug → line-height: 1.375 leading-normal → line-height: 1.5 leading-relaxed → line-height: 1.625 leading-loose → line-height: 2 # Letter Spacing tracking-tight → letter-spacing: -0.05em tracking-normal → letter-spacing: 0 tracking-wide → letter-spacing: 0.05em tracking-widest → letter-spacing: 0.1em

🔷 text-decoration বিস্তারিত ও font-feature-settings

Class	CSS
`decoration-solid`	text-decoration-style: solid
`decoration-double`	text-decoration-style: double
`decoration-dotted`	text-decoration-style: dotted
`decoration-dashed`	text-decoration-style: dashed
`decoration-wavy`	text-decoration-style: wavy
`underline-offset-1`	text-underline-offset: 1px
`underline-offset-2`	text-underline-offset: 2px
`underline-offset-4`	text-underline-offset: 4px
`ordinal`	font-variant-numeric: ordinal
`slashed-zero`	font-variant-numeric: slashed-zero
`lining-nums`	font-variant-numeric: lining-nums
`diagonal-fractions`	font-variant-numeric: diagonal-fractions
`font-feature-settings-['smcp']`	Small Caps
`font-feature-settings-['tnum']`	Tabular numbers

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🎨 Colors — রঙের জগত

Tailwind-এর built-in color palette ও ব্যবহার পদ্ধতি।

🔷 Color System — Shade (50–950)

# প্রতিটি রঙের ১১টি shade: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 # ছোট number = হালকা, বড় number = গাঢ় # Available Colors: slate, gray, zinc, neutral, stone ← Grays red, orange, amber, yellow ← Warm lime, green, emerald, teal ← Cool green cyan, sky, blue, indigo ← Blues violet, purple, fuchsia, pink, rose ← Purples/Pinks white, black ← Extremes # Text Color <p class="text-blue-500">নীল লেখা</p> <p class="text-red-700">গাঢ় লাল লেখা</p> <p class="text-emerald-400">সবুজ লেখা</p> # Background Color <div class="bg-yellow-100">হালকা হলুদ background</div> <div class="bg-slate-900">গাঢ় স্লেট background</div> # Border Color <div class="border border-purple-500">বেগুনি border</div>

🔷 Opacity দিয়ে Color

# Tailwind v4 — color-mix() দিয়ে opacity bg-blue-500/50 → 50% opacity blue background text-red-600/75 → 75% opacity red text border-green-400/30 → 30% opacity green border <div class="bg-blue-500/20 text-blue-900"> হালকা নীল background </div> # Opacity utility (পুরো element-এর) opacity-0 → opacity: 0 opacity-25 → opacity: 0.25 opacity-50 → opacity: 0.5 opacity-75 → opacity: 0.75 opacity-100 → opacity: 1

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📐 Spacing — Padding ও Margin

Tailwind-এর spacing scale বুঝলে সব sizing সহজ হয়ে যায়।

🔷 Spacing Scale — 1 unit = 0.25rem = 4px

Class	Value	px
`p-0 / m-0`	0	0px
`p-1 / m-1`	0.25rem	4px
`p-2 / m-2`	0.5rem	8px
`p-3 / m-3`	0.75rem	12px
`p-4 / m-4`	1rem	16px
`p-5 / m-5`	1.25rem	20px
`p-6 / m-6`	1.5rem	24px
`p-8 / m-8`	2rem	32px
`p-10 / m-10`	2.5rem	40px
`p-12 / m-12`	3rem	48px
`p-16 / m-16`	4rem	64px
`p-24 / m-24`	6rem	96px

🔷 Directional Padding ও Margin

# Padding p-4 → সব দিকে padding px-4 → left ও right padding py-4 → top ও bottom padding pt-4 → top padding pr-4 → right padding pb-4 → bottom padding pl-4 → left padding ps-4 → padding-inline-start (RTL-aware) pe-4 → padding-inline-end # Margin (একই pattern) m-4 → সব দিকে margin mx-4 → left ও right my-4 → top ও bottom mt-4 → top mr-4 → right mb-4 → bottom ml-4 → left mx-auto → center করতে (container centering) # Negative Margin -mt-4 → margin-top: -1rem -ml-2 → margin-left: -0.5rem

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📏 Sizing — Width ও Height

Element-এর আকার নির্ধারণ করার সব utility।

🔷 Width

# Fixed width (spacing scale) w-4 → 1rem (16px) w-8 → 2rem (32px) w-16 → 4rem (64px) w-32 → 8rem (128px) w-64 → 16rem (256px) # Percentage width w-1/2 → 50% w-1/3 → 33.33% w-2/3 → 66.67% w-1/4 → 25% w-3/4 → 75% w-full → 100% # Viewport ও special w-screen → 100vw w-auto → auto w-min → min-content w-max → max-content w-fit → fit-content # Max/Min Width max-w-xs → 20rem max-w-sm → 24rem max-w-md → 28rem max-w-lg → 32rem max-w-xl → 36rem max-w-2xl → 42rem max-w-full → 100% max-w-screen-lg → 1024px min-w-0 → 0 min-w-full → 100%

🔷 Height

# Height (width-এর মতোই) h-4, h-8, h-16, h-32, h-64 → fixed rem values h-1/2, h-full → percentage h-screen → 100vh h-dvh → 100dvh (dynamic viewport) h-svh → 100svh (small viewport) h-lvh → 100lvh (large viewport) h-auto → auto # Tailwind v4 — size-* (w ও h একসাথে) size-4 → width: 1rem; height: 1rem size-8 → width: 2rem; height: 2rem size-full → width: 100%; height: 100%  <button class="size-10 bg-blue-500 rounded-full"> <svg class="size-5 mx-auto">...</svg> </button>

🔷 max-height ও Logical Sizing (inline-size, block-size)

Class	CSS
`max-h-screen`	max-height: 100vh
`max-h-96`	max-height: 24rem
`max-h-full`	max-height: 100%
`max-h-[500px]`	max-height: 500px (arbitrary)
`min-inline-size-0`	min-inline-size: 0
`max-inline-size-full`	max-inline-size: 100%
`max-inline-size-screen`	max-inline-size: 100vw
`min-block-size-0`	min-block-size: 0
`max-block-size-screen`	max-block-size: 100vh

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🗃️ Layout ও Display

Element কীভাবে page-এ বসবে তা নিয়ন্ত্রণ করো।

🔷 Display

block → display: block inline-block → display: inline-block inline → display: inline flex → display: flex inline-flex → display: inline-flex grid → display: grid inline-grid → display: inline-grid hidden → display: none table → display: table contents → display: contents

🔷 Container ও Overflow

# Container — responsive max-width <div class="container mx-auto px-4"> ... </div> # sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px # Overflow overflow-hidden → overflow: hidden overflow-auto → overflow: auto overflow-scroll → overflow: scroll overflow-visible → overflow: visible overflow-x-auto → overflow-x: auto overflow-y-hidden → overflow-y: hidden # Object Fit (img/video) object-cover → object-fit: cover object-contain → object-fit: contain object-fill → object-fit: fill object-none → object-fit: none # Aspect Ratio (v4) aspect-square → aspect-ratio: 1/1 aspect-video → aspect-ratio: 16/9 aspect-[4/3] → aspect-ratio: 4/3

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

↔️ Flexbox

Tailwind দিয়ে Flexbox layout তৈরি করো সহজে।

🔷 Flex Container

# Direction flex-row → flex-direction: row (default) flex-row-reverse → flex-direction: row-reverse flex-col → flex-direction: column flex-col-reverse → flex-direction: column-reverse # Wrap flex-wrap → flex-wrap: wrap flex-nowrap → flex-wrap: nowrap flex-wrap-reverse → flex-wrap: wrap-reverse # Justify Content (main axis) justify-start → justify-content: flex-start justify-center → justify-content: center justify-end → justify-content: flex-end justify-between → justify-content: space-between justify-around → justify-content: space-around justify-evenly → justify-content: space-evenly # Align Items (cross axis) items-start → align-items: flex-start items-center → align-items: center items-end → align-items: flex-end items-stretch → align-items: stretch items-baseline → align-items: baseline # Gap gap-4 → gap: 1rem gap-x-4 → column-gap: 1rem gap-y-4 → row-gap: 1rem

🔷 Flex Items

# Flex grow/shrink/basis flex-1 → flex: 1 1 0% (grow করবে, shrink করবে) flex-auto → flex: 1 1 auto flex-none → flex: none (grow/shrink করবে না) flex-initial → flex: 0 1 auto grow → flex-grow: 1 grow-0 → flex-grow: 0 shrink → flex-shrink: 1 shrink-0 → flex-shrink: 0 # Order order-first → order: -9999 order-last → order: 9999 order-1 → order: 1 # Self alignment self-auto → align-self: auto self-start → align-self: flex-start self-center → align-self: center self-end → align-self: flex-end

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow"> <div class="font-bold text-xl">Logo</div> <ul class="flex gap-6"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Login</button> </nav>

🔷 justify-items, justify-self, align-content ও place utilities

Class	CSS	কাজ
`justify-items-start`	justify-items: start	Grid items inline start
`justify-items-center`	justify-items: center	Grid items centered
`justify-items-end`	justify-items: end	Grid items inline end
`justify-items-stretch`	justify-items: stretch	Grid items stretch (default)
`justify-self-start`	justify-self: start	একটি item-র individual justify
`justify-self-center`	justify-self: center
`justify-self-end`	justify-self: end
`content-start`	align-content: flex-start	Multi-line flex: start-এ
`content-center`	align-content: center	Multi-line flex: center-এ
`content-between`	align-content: space-between	Multi-line flex: between
`content-around`	align-content: space-around	Multi-line flex: around
`place-content-center`	place-content: center	align-content + justify-content একসাথে
`place-content-between`	place-content: space-between
`place-self-center`	place-self: center	align-self + justify-self একসাথে
`place-self-auto`	place-self: auto

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔲 Grid Layout

CSS Grid-এর সব শক্তি Tailwind-এর মাধ্যমে।

🔷 Grid Container

# Columns grid-cols-1 → grid-template-columns: repeat(1, ...) grid-cols-2 → 2 columns grid-cols-3 → 3 columns grid-cols-4 → 4 columns grid-cols-6 → 6 columns grid-cols-12 → 12 columns grid-cols-none → none # Tailwind v4 — যেকোনো সংখ্যা (dynamic!) grid-cols-7 → 7 columns ✅ (v4-তে config ছাড়াই কাজ করে) grid-cols-15 → 15 columns ✅ # Rows grid-rows-1 → 1 row grid-rows-4 → 4 rows # Gap gap-4 → row ও column gap: 1rem gap-x-6 → column-gap: 1.5rem gap-y-4 → row-gap: 1rem  <div class="grid grid-cols-3 gap-6"> <div class="bg-white p-4 rounded shadow">Card 1</div> <div class="bg-white p-4 rounded shadow">Card 2</div> <div class="bg-white p-4 rounded shadow">Card 3</div> </div>

🔷 Grid Item — Span ও Placement

# Column Span col-span-1 → grid-column: span 1 col-span-2 → grid-column: span 2 col-span-3 → grid-column: span 3 col-span-full → span all columns # Row Span row-span-2 → grid-row: span 2 row-span-3 → grid-row: span 3 # Placement col-start-1 → grid-column-start: 1 col-end-4 → grid-column-end: 4 row-start-2 → grid-row-start: 2  <div class="grid grid-cols-4 gap-4"> <div class="col-span-3 bg-white p-4 rounded">Main Content</div> <div class="col-span-1 bg-gray-100 p-4 rounded">Sidebar</div> <div class="col-span-4 bg-blue-50 p-4 rounded">Footer Bar</div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📍 Positioning

Element-কে page-এ সঠিক জায়গায় বসাও।

🔷 Position Type ও Coordinates

# Position static → position: static (default) relative → position: relative absolute → position: absolute fixed → position: fixed sticky → position: sticky # Top / Right / Bottom / Left top-0 → top: 0 top-4 → top: 1rem top-1/2 → top: 50% -top-4 → top: -1rem right-0, bottom-0, left-0 → একই pattern # inset (সব দিক একসাথে) inset-0 → top:0; right:0; bottom:0; left:0 (overlay) inset-x-0 → left: 0; right: 0 inset-y-0 → top: 0; bottom: 0 # Z-index z-0 → z-index: 0 z-10 → z-index: 10 z-20 → z-index: 20 z-50 → z-index: 50 z-auto → z-index: auto

<div class="relative w-64 h-64"> <img class="w-full h-full object-cover rounded-lg" src="..." /> <div class="absolute inset-0 bg-black/50 rounded-lg flex items-center justify-center"> <p class="text-white font-bold">Hover Text</p> </div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔲 Borders ও Outline

Border, Radius ও Outline-এর সব utility।

🔷 Border Width ও Color

# Border Width border → border-width: 1px border-0 → border-width: 0 border-2 → border-width: 2px border-4 → border-width: 4px border-8 → border-width: 8px # Directional border-t → border-top only border-r → border-right only border-b → border-bottom only border-l → border-left only border-x → left ও right border-y → top ও bottom # Border Color border-gray-300 → gray border border-blue-500 → blue border border-transparent → transparent # Border Style border-solid → solid border-dashed → dashed border-dotted → dotted border-none → none

🔷 Border Radius

rounded-none → border-radius: 0 rounded-sm → 0.125rem (2px) rounded → 0.25rem (4px) rounded-md → 0.375rem (6px) rounded-lg → 0.5rem (8px) rounded-xl → 0.75rem (12px) rounded-2xl → 1rem (16px) rounded-3xl → 1.5rem (24px) rounded-full → 9999px (circle/pill) # Directional Radius rounded-t-lg → top corners rounded-b-xl → bottom corners rounded-l-lg → left corners rounded-r-md → right corners rounded-tl-xl → top-left only  <button class="bg-blue-600 text-white px-6 py-2 rounded-full"> Subscribe </button>

🔷 Outline — Color, Style ও Offset

Class	CSS
`outline`	outline-style: solid; outline-width: 1px
`outline-none`	outline: 2px solid transparent (accessibility safe)
`outline-solid`	outline-style: solid
`outline-dashed`	outline-style: dashed
`outline-dotted`	outline-style: dotted
`outline-double`	outline-style: double
`outline-2`	outline-width: 2px
`outline-4`	outline-width: 4px
`outline-blue-500`	outline-color: oklch(…)
`outline-offset-0`	outline-offset: 0px
`outline-offset-2`	outline-offset: 2px
`outline-offset-4`	outline-offset: 4px
`-outline-offset-1`	outline-offset: -1px (inset)

<button class="outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 rounded-lg px-4 py-2 bg-blue-600 text-white"> Accessible Button </button>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🖼️ Backgrounds

Background color, gradient, image ও size।

🔷 Gradient

# Linear Gradient bg-gradient-to-r → left to right bg-gradient-to-l → right to left bg-gradient-to-t → bottom to top bg-gradient-to-b → top to bottom bg-gradient-to-tr → top-right diagonal bg-gradient-to-bl → bottom-left diagonal # Color Stops from-blue-500 → শুরুর রঙ via-purple-500 → মাঝের রঙ (optional) to-pink-500 → শেষের রঙ  <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold"> Get Started </button>  <section class="bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 text-white py-24"> ... </section>

🔷 Tailwind v4 — Radial ও Conic Gradient

# Radial Gradient (v4 নতুন!) bg-radial → radial-gradient bg-radial-[at_top] → custom position # Conic Gradient (v4 নতুন!) bg-conic → conic-gradient # Gradient Interpolation Mode (v4) bg-gradient-to-r/oklch → OKLCH color space bg-gradient-to-r/srgb → sRGB (default) bg-gradient-to-r/hsl → HSL  <div class="bg-gradient-to-r/oklch from-blue-500 to-pink-500"> More vivid colors! </div>

🔷 Background Image ও Size

# Background Size bg-auto → background-size: auto bg-cover → background-size: cover bg-contain → background-size: contain # Background Position bg-center → center center bg-top → center top bg-bottom → center bottom bg-left → left center bg-right → right center # Background Repeat bg-repeat → repeat bg-no-repeat → no-repeat bg-repeat-x → repeat-x  <section class="bg-[url('/hero.jpg')] bg-cover bg-center bg-no-repeat h-screen"> ... </section>

🔷 Background Attachment ও Origin

Class	CSS	কাজ
`bg-fixed`	background-attachment: fixed	Scroll করলেও BG নড়ে না (parallax)
`bg-local`	background-attachment: local	Element scroll-এর সাথে
`bg-scroll`	background-attachment: scroll (default)	Page scroll-এর সাথে
`bg-origin-border`	background-origin: border-box	Border থেকে BG শুরু
`bg-origin-padding`	background-origin: padding-box (default)	Padding থেকে BG শুরু
`bg-origin-content`	background-origin: content-box	Content থেকে BG শুরু

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🌟 Shadows ও Effects

Box shadow, text shadow ও visual effects।

🔷 Box Shadow

shadow-none → no shadow shadow-sm → small, subtle shadow shadow → default shadow shadow-md → medium shadow shadow-lg → large shadow shadow-xl → extra large shadow shadow-2xl → 2x extra large shadow-inner → inner shadow # Colored Shadow (v4) shadow-blue-500/50 → colored shadow with opacity  <div class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow p-6"> ... </div>

🔷 Ring (Focus Outline)

# Ring (focus indicator) ring → box-shadow ring: 3px ring-1 → 1px ring ring-2 → 2px ring ring-4 → 4px ring ring-inset → inset ring ring-blue-500 → blue ring color ring-offset-2 → ring offset ring-offset-white → offset color  <button class="bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> Click me </button>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔍 Filters

CSS filter effects Tailwind-এর মাধ্যমে।

🔷 Filter Utilities

# Blur blur-none → filter: blur(0) blur-sm → blur(4px) blur → blur(8px) blur-md → blur(12px) blur-lg → blur(16px) blur-xl → blur(24px) blur-2xl → blur(40px) blur-3xl → blur(64px) # Brightness brightness-50 → brightness(0.5) brightness-75 → brightness(0.75) brightness-100 → brightness(1) — default brightness-125 → brightness(1.25) brightness-150 → brightness(1.5) # Contrast contrast-50 → contrast(0.5) contrast-100 → contrast(1) — default contrast-150 → contrast(1.5) contrast-200 → contrast(2) # Grayscale grayscale-0 → grayscale(0) grayscale → grayscale(100%) # Sepia, Invert, Hue-rotate sepia → sepia(100%) invert → invert(100%) hue-rotate-90 → hue-rotate(90deg) hue-rotate-180 → hue-rotate(180deg)  <img class="w-full brightness-75 hover:brightness-100 transition-all" src="..." />

🔷 Backdrop Filter

# Backdrop Blur (glassmorphism effect) backdrop-blur-sm → blur(4px) backdrop-blur → blur(8px) backdrop-blur-md → blur(12px) backdrop-blur-lg → blur(16px) backdrop-blur-xl → blur(24px) backdrop-brightness-50 → backdrop brightness backdrop-contrast-150 → backdrop contrast  <div class="backdrop-blur-md bg-white/20 border border-white/30 rounded-2xl p-6 shadow-xl"> Glassmorphism effect! </div>

🔷 Saturate Filter ও বাকি Backdrop Filters

Class	CSS
`saturate-0`	filter: saturate(0) — grayscale
`saturate-50`	filter: saturate(.5)
`saturate-100`	filter: saturate(1) — normal
`saturate-150`	filter: saturate(1.5)
`saturate-200`	filter: saturate(2) — vivid
`backdrop-grayscale`	backdrop-filter: grayscale(100%)
`backdrop-grayscale-0`	backdrop-filter: grayscale(0)
`backdrop-hue-rotate-90`	backdrop-filter: hue-rotate(90deg)
`backdrop-invert`	backdrop-filter: invert(100%)
`backdrop-invert-0`	backdrop-filter: invert(0)
`backdrop-opacity-50`	backdrop-filter: opacity(0.5)
`backdrop-saturate-50`	backdrop-filter: saturate(.5)
`backdrop-saturate-150`	backdrop-filter: saturate(1.5)
`backdrop-sepia`	backdrop-filter: sepia(100%)
`backdrop-sepia-0`	backdrop-filter: sepia(0)

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔄 Transforms ও 3D

Element-কে rotate, scale, translate ও 3D transform করো।

🔷 2D Transforms

# No transform transform-none → transform: none (reset all transforms) transform → enable hardware-accelerated transforms # Scale scale-50 → transform: scale(0.5) scale-75 → scale(0.75) scale-90 → scale(0.9) scale-100 → scale(1) — default scale-110 → scale(1.1) scale-125 → scale(1.25) scale-x-110 → scaleX only scale-y-75 → scaleY only # Rotate rotate-0 → rotate(0deg) rotate-1 → rotate(1deg) rotate-3 → rotate(3deg) rotate-6 → rotate(6deg) rotate-12 → rotate(12deg) rotate-45 → rotate(45deg) rotate-90 → rotate(90deg) rotate-180 → rotate(180deg) -rotate-6 → rotate(-6deg) # Translate translate-x-4 → translateX(1rem) translate-y-4 → translateY(1rem) -translate-x-1/2 → translateX(-50%) ← centering trick -translate-y-1/2 → translateY(-50%)

🔷 3D Transforms (Tailwind v4 নতুন!)

# Rotate in 3D rotate-x-12 → rotateX(12deg) rotate-y-45 → rotateY(45deg) rotate-z-12 → rotateZ(12deg) # Scale in 3D scale-z-150 → scaleZ(1.5) # Translate in 3D translate-z-4 → translateZ(1rem) -translate-z-8 → translateZ(-2rem) # Perspective perspective-500 → perspective(500px) perspective-1000 → perspective(1000px) perspective-near → perspective(150px) perspective-normal → perspective(500px) perspective-far → perspective(1000px) # Transform origin origin-center → transform-origin: center origin-top → transform-origin: top origin-top-left → transform-origin: top left  <div class="perspective-1000"> <div class="rotate-y-12 hover:rotate-y-0 transition-transform duration-500 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl p-8 text-white"> 3D Card! </div> </div>

🔷 Skew Transform

Class	CSS	ব্যবহার
`skew-x-3`	transform: skewX(3deg)	Subtle horizontal skew
`skew-x-6`	transform: skewX(6deg)
`skew-x-12`	transform: skewX(12deg)
`-skew-x-6`	transform: skewX(-6deg)	Reverse direction
`skew-y-3`	transform: skewY(3deg)	Vertical skew
`skew-y-6`	transform: skewY(6deg)
`skew-x-[20deg]`	transform: skewX(20deg)	Arbitrary skew

<div class="relative overflow-hidden bg-blue-600 py-16"> <div class="absolute bottom-0 left-0 right-0 h-16 bg-white -skew-y-3 origin-bottom-left"></div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

✨ Transitions ও Animation

Smooth animation ও micro-interaction তৈরি করো।

🔷 Transitions

# Transition Property transition-none → no transition transition-all → all properties transition → common properties (color, bg, border, shadow, opacity, transform) transition-colors → color-related only transition-opacity → opacity only transition-shadow → shadow only transition-transform → transform only # Duration duration-75 → 75ms duration-100 → 100ms duration-150 → 150ms duration-200 → 200ms duration-300 → 300ms duration-500 → 500ms duration-700 → 700ms duration-1000 → 1000ms # Easing ease-linear → linear ease-in → cubic-bezier(0.4, 0, 1, 1) ease-out → cubic-bezier(0, 0, 0.2, 1) ease-in-out → cubic-bezier(0.4, 0, 0.2, 1) # Delay delay-75, delay-100, delay-150, delay-300, delay-500, delay-700  <button class="bg-blue-600 hover:bg-blue-800 text-white px-6 py-3 rounded-lg transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg"> Hover me! </button>

🔷 Animation

# Built-in Animations animate-none → no animation animate-spin → infinite rotate (loading spinner) animate-ping → scale ও fade (notification pulse) animate-pulse → opacity pulse (skeleton loading) animate-bounce → bounce up/down  <svg class="animate-spin h-6 w-6 text-blue-600" viewBox="0 0 24 24">...</svg>  <span class="relative flex h-3 w-3"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span> </span>  <div class="animate-pulse space-y-3"> <div class="h-4 bg-gray-200 rounded w-3/4"></div> <div class="h-4 bg-gray-200 rounded w-1/2"></div> </div>

🔷 @starting-style — Enter/Exit Transition (v4 নতুন!)

<div class="starting:opacity-0 starting:scale-95 opacity-100 scale-100 transition-all duration-300 bg-white rounded-xl shadow-2xl p-6"> Modal content </div>  <details> <summary>Click me</summary> <div class="starting:opacity-0 starting:-translate-y-2 opacity-100 translate-y-0 transition-all duration-200"> Content here </div> </details>

✅ @starting-style হলো Tailwind v4-এর নতুন feature। JavaScript ছাড়াই enter animation করা যায়। CSS-এর নতুন @starting-style at-rule ব্যবহার করে।

🔷 transition-behavior — discrete transitions (v4)

Tailwind v4-তে নতুন transition-discrete utility দিয়ে display: none থেকে animate করা যায় — JavaScript ছাড়াই modal/dropdown hide/show animate করো।

Class	CSS
`transition-discrete`	transition-behavior: allow-discrete
`transition-normal`	transition-behavior: normal (default)

<dialog class="open:block hidden transition-discrete duration-300 starting:opacity-0 open:opacity-100"> Modal Content </dialog>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📱 Responsive Design

Mobile-first approach-এ responsive layout তৈরি করো।

🔷 Breakpoints — Mobile First

Prefix	Min Width	Device
(none)	0px	Mobile (সব screen)
`sm:`	640px	Small tablet
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop
`2xl:`	1536px	Large Desktop

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div class="bg-white p-4 rounded shadow">Card</div> </div>  <h1 class="text-2xl md:text-4xl lg:text-6xl font-bold"> Responsive Title </h1>  <div class="block md:hidden">Mobile only</div> <div class="hidden md:block">Desktop only</div>

🔷 Max-width Variants (v4 নতুন!)

# max-width breakpoints (v4) max-sm:text-sm → sm-এর নিচে শুধু apply max-md:hidden → md-এর নিচে hide max-lg:flex-col → lg-এর নিচে column flex # Range Breakpoints sm:max-lg:bg-blue-100 → শুধু sm থেকে lg এর মধ্যে  <div class="max-md:flex-col flex gap-4"> <div class="flex-1">Content</div> <div class="w-64 max-md:w-full">Sidebar</div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🌙 Dark Mode

সহজেই dark mode support যোগ করো।

🔷 Dark Mode — Automatic (System Preference)

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-xl"> <h2 class="text-xl font-bold text-gray-900 dark:text-white"> Hello! </h2> <p class="text-gray-600 dark:text-gray-400"> এই content dark mode-এ automatically পরিবর্তন হবে। </p> </div>  <button class="bg-blue-600 dark:bg-blue-500 text-white hover:bg-blue-700 dark:hover:bg-blue-400 px-4 py-2 rounded-lg"> Click </button>

🔷 Manual Dark Mode Toggle (CSS v4)

<html class="dark"> ... </html>  @import "tailwindcss"; @custom-variant dark (&:is(.dark *));  <button onclick="document.documentElement.classList.toggle('dark')"> Toggle Dark Mode </button>  <script> if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } </script>

✅ Best Practice: System preference automatic follow করাই ভালো। তবে toggle button রাখলে user-এর choice LocalStorage-এ save করো।

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📦 Container Queries

Viewport নয়, parent container-এর আকার অনুযায়ী style করো।

🔷 Container Queries — Tailwind v4 Built-in

<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </div> # Container query breakpoints: @xs → 20rem (320px) @sm → 24rem (384px) @md → 28rem (448px) @lg → 32rem (512px) @xl → 36rem (576px) @2xl → 42rem (672px) @3xl → 48rem (768px) @4xl → 56rem (896px) @5xl → 64rem (1024px) @6xl → 72rem (1152px) @7xl → 80rem (1280px)

<div class="@container"> <div class="flex-col @max-md:flex-row flex"> ... </div> </div>  <div class="@container/sidebar"> <div class="@lg/sidebar:hidden">Collapsed</div> </div>

✅ Container Queries কখন ব্যবহার করবে:

Reusable component যা বিভিন্ন জায়গায় ব্যবহার হয় → Sidebar-এর ভেতরের content → Widget বা Card যা বিভিন্ন layout-এ থাকতে পারে

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🖱️ Hover, Focus ও State Variants

Interactive state অনুযায়ী style পরিবর্তন করো।

🔷 Interaction States

# Hover hover:bg-blue-700 hover:text-white hover:scale-105 hover:shadow-xl # Focus focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 # Focus-visible (keyboard focus only) focus-visible:ring-2 focus-visible:ring-blue-500 # Active (click হলে) active:scale-95 active:bg-blue-800 # Disabled disabled:opacity-50 disabled:cursor-not-allowed # Group Hover (parent hover করলে child-এ apply) <div class="group"> <p class="text-gray-600 group-hover:text-blue-600">Text</p> <svg class="opacity-0 group-hover:opacity-100">...</svg> </div> # Peer (sibling state) <input class="peer" type="checkbox" /> <label class="peer-checked:text-blue-600">Label</label>

🔷 Form States

# Input states checked:bg-blue-600 → checkbox checked placeholder-gray-400 → placeholder color required:border-red-400 → required field # Validation (HTML5) valid:border-green-500 → valid input invalid:border-red-500 → invalid input  <input type="email" placeholder="তোমার email" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 placeholder-gray-400 valid:border-green-400 invalid:border-red-400 transition-colors duration-200" />

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔮 Pseudo Elements ও Selectors

::before, ::after ও structural selectors।

🔷 Before ও After

# before: ও after: pseudo-elements <div class="before:content-['★'] before:text-yellow-400 before:mr-2 after:content-['→'] after:text-blue-500 after:ml-2"> Text with decorators </div>  <button class="relative before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:mb-2 before:content-['Tooltip!'] before:bg-gray-800 before:text-white before:text-xs before:px-2 before:py-1 before:rounded before:opacity-0 hover:before:opacity-100 before:transition-opacity"> Hover for tooltip </button>

🔷 Structural Selectors

# First ও Last child first:border-t-0 → প্রথম child-এ top border নেই last:border-b-0 → শেষ child-এ bottom border নেই first:rounded-t-lg → প্রথম child-এ top radius # Odd ও Even (table/list) odd:bg-gray-50 → বিজোড় row-এ gray bg even:bg-white → জোড় row-এ white bg # nth-child (v4) nth-3:bg-blue-100 → প্রতি ৩য় child  <tbody> <tr class="odd:bg-gray-50 even:bg-white hover:bg-blue-50 transition-colors"> <td class="px-4 py-2">Row</td> </tr> </tbody> # not: (v4) not-last:border-b → শেষটি বাদে সবার নিচে border

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔧 Arbitrary Values — Custom Value ব্যবহার করো

Tailwind-এর scale-এর বাইরে যেকোনো value ব্যবহার করতে square bracket notation।

🔷 Arbitrary Value Syntax

# Square bracket দিয়ে যেকোনো value w-[300px] → width: 300px h-[calc(100vh-4rem)] → height: calc(100vh - 4rem) top-[117px] → top: 117px text-[22px] → font-size: 22px bg-[#1da1f2] → custom hex color text-[rgb(0,0,200)] → custom rgb color grid-cols-[repeat(3,200px)] → custom grid delay-[400ms] → animation delay # Arbitrary CSS property [mask-type:luminance] → mask-type: luminance [&_p]:text-gray-600 → nested p tags [&:nth-child(3)]:opacity-0 → nth-child  <div class="w-[300px] h-[calc(100vh-64px)] bg-[#f5f5f0]"> Custom sized element </div> <span class="text-[13px] leading-[1.3] tracking-[0.02em]"> Precisely typed text </span>

⚠️ Arbitrary value মানে custom CSS class generate হয়। বেশি ব্যবহার করলে design system-এর সুবিধা কমে। প্রথমে theme variable-এ যোগ করার চেষ্টা করো।

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🎨 Custom Theme ও CSS Variables

Tailwind v4-এর CSS-first configuration দিয়ে নিজের design system তৈরি করো।

🔷 @theme — CSS-first Configuration (v4)

/* tailwind.css বা main CSS file */ @import "tailwindcss"; @theme { /* Custom Colors */ --color-brand-50: oklch(0.98 0.02 260); --color-brand-500: oklch(0.55 0.22 260); --color-brand-900: oklch(0.25 0.12 260); /* Custom Fonts */ --font-display: "Playfair Display", serif; --font-body: "Source Serif 4", serif; /* Custom Spacing */ --spacing-18: 4.5rem; --spacing-72: 18rem; /* Custom Breakpoints */ --breakpoint-xs: 480px; --breakpoint-3xl: 1920px; /* Custom Easing */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Border Radius */ --radius-4xl: 2rem; --radius-5xl: 2.5rem; } /* ব্যবহার */ .hero { font-family: var(--font-display); color: var(--color-brand-500); }

<h1 class="font-display text-6xl text-brand-500"> Custom Brand Heading </h1> <button class="bg-brand-500 hover:bg-brand-900 rounded-4xl px-18"> Custom Button </button>

🔷 CSS Variables as Design Tokens

/* সব theme value automatically CSS variable হয় */ :root { --color-brand-500: oklch(0.55 0.22 260); /* auto-generated */ --font-display: "Playfair Display", serif; --spacing-18: 4.5rem; } /* JS-এ access করো */ const brandColor = getComputedStyle(document.documentElement) .getPropertyValue('--color-brand-500'); /* Inline style-এ */ <div style="color: var(--color-brand-500)">...</div>

🔷 Theme Override ও Extend

@import "tailwindcss"; @theme { /* Default color পুরোপুরি replace করো */ --color-*: initial; /* সব default color মুছে দাও */ /* তারপর নিজেরটা যোগ করো */ --color-primary: oklch(0.6 0.2 230); --color-secondary: oklch(0.7 0.15 330); --color-neutral-100: oklch(0.97 0 0); --color-neutral-900: oklch(0.15 0 0); } /* Specific namespace override */ @theme { --font-*: initial; /* সব default font মুছো */ --font-sans: "DM Sans", sans-serif; --font-mono: "JetBrains Mono", monospace; }

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📜 Directives — @apply, @layer ও আরো

Tailwind-এর CSS directive গুলো দিয়ে custom class তৈরি করো।

🔷 @apply — Class Reuse করো

/* CSS file-এ */ .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-200 hover:shadow-lg hover:scale-[1.02] active:scale-95; } .input-base { @apply w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-colors duration-200; } .card { @apply bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden; }

<button class="btn-primary">Click Me</button> <input class="input-base" type="text" /> <div class="card">...</div>

⚠️ @apply বেশি ব্যবহার করলে utility-first approach-এর সুবিধা কমে। Reusable component-এর জন্য framework (React/Vue) component ব্যবহার করো। @apply শুধু base styles-এর জন্য ব্যবহার করো।

🔷 @layer — CSS স্তর

/* Tailwind-এর তিনটি layer */ @layer base { /* HTML element-এর default style */ h1 { @apply text-3xl font-bold text-gray-900; } h2 { @apply text-2xl font-semibold text-gray-800; } p { @apply text-gray-700 leading-relaxed; } a { @apply text-blue-600 hover:underline; } /* বাংলা font */ body { font-family: 'Hind Siliguri', sans-serif; } } @layer components { /* Reusable component styles */ .badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; } .badge-blue { @apply badge bg-blue-100 text-blue-800; } .badge-green { @apply badge bg-green-100 text-green-800; } .badge-red { @apply badge bg-red-100 text-red-800; } } @layer utilities { /* Custom utility class */ .text-balance { text-wrap: balance; } .scrollbar-hide { scrollbar-width: none; } }

🔷 @source ও @import

/* @import — CSS file combine করো */ @import "tailwindcss"; @import "./base.css"; @import "./components.css"; /* @source — extra file scan করতে */ @source "../node_modules/@my-company/ui-lib"; @source "../../other-project/src"; /* @plugin */ @plugin "@tailwindcss/typography"; @plugin "@tailwindcss/forms";

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔌 Plugins

Official ও community plugin দিয়ে Tailwind আরো শক্তিশালী করো।

🔷 Official Plugins

# @tailwindcss/typography — prose content styling npm install @tailwindcss/typography /* CSS-এ */ @plugin "@tailwindcss/typography";  <article class="prose prose-lg prose-blue max-w-none"> <h1>Blog Post Title</h1> <p>সুন্দরভাবে formatted article content...</p> <ul> <li>Item 1</li> </ul> </article> # Dark mode typography <article class="prose dark:prose-invert">...</article>

# @tailwindcss/forms — Form element reset ও styling npm install @tailwindcss/forms @plugin "@tailwindcss/forms"; # @tailwindcss/aspect-ratio (v3) — v4-এ built-in # @tailwindcss/container-queries (v3) — v4-এ built-in # @tailwindcss/line-clamp (v3) — v4-এ built-in <p class="line-clamp-3"> দীর্ঘ paragraph যা ৩ লাইনের পরে ... দিয়ে কাটবে। Lorem ipsum... </p>

🔷 Custom Plugin তৈরি (v4)

/* CSS-এ custom utility */ @layer utilities { .scrollbar-thin { scrollbar-width: thin; scrollbar-color: theme(colors.gray.400) transparent; } .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.1); } .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.15); } .clip-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } }

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🚀 Tailwind CSS v4 — কী কী নতুন?

2025 সালে release হওয়া v4-এর সব major changes এক জায়গায়।

🔷 v4 এর Major Changes

Feature	v3	v4
Config file	tailwind.config.js	@theme in CSS ✅
Installation	3+ steps	1 line CSS ✅
Content detection	manual config	Automatic ✅
Color palette	RGB	OKLCH (vivid) ✅
Container queries	Plugin লাগতো	Built-in ✅
3D transforms	❌	✅ Built-in
Gradients	Linear only	Radial, Conic ✅
Build speed	baseline	5x faster ✅
Dynamic values	Config দরকার	Any value ✅
@starting-style	❌	✅ Enter/exit anim
not-* variant	❌	✅
Max-width breakpoints	Limited	max-sm:, max-lg: ✅

🔷 v3 থেকে v4 Upgrade করো

# Automatic upgrade tool npx @tailwindcss/upgrade # Manual steps: # ১. tailwind.config.js → @theme in CSS # ২. @tailwind directives → @import "tailwindcss" # ৩. PostCSS config আপডেট করো # ৪. Renamed utilities ঠিক করো: # v3 → v4 renamed: shadow-sm → shadow-xs shadow → shadow-sm drop-shadow-sm → drop-shadow-xs blur-sm → blur-xs rounded-sm → rounded-xs ring → ring-3 ring-1 → ring-1 (unchanged)

✅ v4 তে OKLCH color:

v4-তে সব default color OKLCH format-এ। OKLCH হলো perceptually uniform color space — এতে একই "lightness" value মানে সব রঙে আসলেই একই উজ্জ্বলতা। নতুন project-এ v4 ব্যবহার করো, পুরনো project-এ upgrade tool ব্যবহার করো।

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🧹 Preflight — Base Styles ও Editor Setup

Tailwind-এর default reset styles এবং সঠিকভাবে editor configure করার পদ্ধতি।

🔷 Preflight — Browser Default Reset

Preflight হলো Tailwind-এর built-in CSS reset। @import "tailwindcss" করলে এটি automatically apply হয়। Browser-এর inconsistent default styles সরিয়ে দেয় এবং সব উপাদানে predictable baseline দেয়।

Browser Default	Preflight-এর পরে
`h1–h6` নিজস্ব size ও margin	সব heading unstyled, inherit করে
`ul/ol` bullet/number আছে	list-style: none, padding: 0
`img` inline element	display: block, max-width: 100%
`button` নিজস্ব style	cursor: pointer, background: transparent
`*` box-sizing: content-box	box-sizing: border-box সব কিছুতে
`a` নীল underline	color inherit করে

/* Preflight বন্ধ করতে (কদাচিৎ দরকার হয়): */ @import "tailwindcss" layer(utilities); /* preflight skip */ /* অথবা নিজের reset দিতে: */ @import "tailwindcss"; @layer base { /* Preflight-এর পর নিজের base style */ body { font-family: theme(--font-sans); } }

🔷 Editor Setup — VS Code IntelliSense

Tailwind CSS IntelliSense extension VS Code-এ install করলে class name autocomplete, hover preview এবং linting পাবে।

/* VS Code-এ: */ Extensions → "Tailwind CSS IntelliSense" by Tailwind Labs → Install /* সুবিধা: */ ✅ Class autocomplete (type "flex" → সব flex classes দেখায়) ✅ Hover করলে generated CSS দেখায় ✅ Unused class detect করে ✅ Sorting support (Prettier plugin) /* Prettier Plugin দিয়ে class sort করো: */ npm install -D prettier-plugin-tailwindcss /* .prettierrc: */ { "plugins": ["prettier-plugin-tailwindcss"] }

Compatibility ও Browser Support

/* Tailwind v4 এর browser requirements: */ - Chrome 111+, Firefox 128+, Safari 16.4+ - CSS features: @layer, @property, oklch(), color-mix() /* Older browser fallbacks (v4.1+): */ /* Tailwind v4.1 automatically adds fallbacks for: */ - oklch() colors → rgb() fallback - color-mix() → static color fallback - CSS nesting → expanded rules /* Browser compatibility check করো: */ /* tailwindcss.com/docs/compatibility */

🔷 Detecting Classes — Source File Scanning

Tailwind v4 automatically তোমার source file scan করে কোন class ব্যবহার হচ্ছে বের করে। v3-এ content config করতে হত, v4-এ এটি automatic।

/* v4 - automatic detection (CSS file-এ): */ @import "tailwindcss"; /* ব্যস! Tailwind নিজেই HTML, JS, JSX scan করে */ /* Manual source যোগ করতে হলে: */ @import "tailwindcss"; @source "../node_modules/my-lib/src"; /* নির্দিষ্ট ফাইল pattern: */ @source "../../other-project/**/*.html"; /* Safe list (dynamically তৈরি class): */ @source unsafe-inline "bg-red-500 bg-blue-500"; /* Block list (কোনো class generate করতে না চাইলে): */ @layer utilities { /* জানার জন্য: এই v4 feature আছে safelist/blocklist */ }

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📊 Tables — Border, Layout ও Caption

HTML table-এর styling-এর জন্য Tailwind-এর সব utilities।

🔷 Table Utilities বিস্তারিত

Class	CSS	ব্যবহার
`border-collapse`	border-collapse: collapse	Cell border একসাথে merge
`border-separate`	border-collapse: separate	Cell border আলাদা আলাদা
`border-spacing-2`	border-spacing: 0.5rem	Separate border-এ gap
`table-auto`	table-layout: auto	Content অনুযায়ী column width
`table-fixed`	table-layout: fixed	Fixed column width
`caption-top`	caption-side: top	Caption উপরে
`caption-bottom`	caption-side: bottom	Caption নিচে

<table class="w-full border-collapse"> <caption class="caption-bottom text-sm text-gray-500 mt-2"> ২০২৬ সালের বিক্রয় তথ্য </caption> <thead> <tr class="bg-gray-100 text-left"> <th class="px-4 py-2 border border-gray-300 font-semibold">নাম</th> <th class="px-4 py-2 border border-gray-300 font-semibold">পরিমাণ</th> </tr> </thead> <tbody> <tr class="hover:bg-blue-50 transition-colors"> <td class="px-4 py-2 border border-gray-300">Product A</td> <td class="px-4 py-2 border border-gray-300">৫০০</td> </tr> </tbody> </table>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🖱️ Interactivity — Cursor, Scroll, Touch ও আরো

User interaction-এর জন্য Tailwind-এর সব utility — cursor থেকে scroll snap পর্যন্ত।

🔷 Cursor ও User Interaction

Class	CSS	কখন?
`cursor-pointer`	cursor: pointer	Clickable element
`cursor-not-allowed`	cursor: not-allowed	Disabled element
`cursor-grab`	cursor: grab	Draggable item
`cursor-text`	cursor: text	Text input area
`cursor-wait`	cursor: wait	Loading state
`cursor-crosshair`	cursor: crosshair	Canvas/drawing
`cursor-zoom-in`	cursor: zoom-in	Image gallery
`select-none`	user-select: none	Text selection বন্ধ
`select-all`	user-select: all	সব select হবে
`pointer-events-none`	pointer-events: none	Click through করবে
`touch-auto`	touch-action: auto	Browser default touch
`touch-none`	touch-action: none	Touch disabled
`touch-pan-x`	touch-action: pan-x	Horizontal swipe
`resize`	resize: both	Textarea resizable
`resize-none`	resize: none	Resize বন্ধ
`resize-y`	resize: vertical	শুধু vertical
`appearance-none`	appearance: none	Native styling সরাও
`will-change-transform`	will-change: transform	Performance hint

🔷 Caret, Accent ও Form Interactivity

Class	CSS	ব্যবহার
`caret-blue-500`	caret-color: #3b82f6	Input cursor রঙ
`caret-transparent`	caret-color: transparent	Cursor লুকাও
`accent-blue-500`	accent-color: #3b82f6	Checkbox/radio রঙ
`accent-auto`	accent-color: auto	Browser default
`color-scheme-light`	color-scheme: light	Light scrollbar
`color-scheme-dark`	color-scheme: dark	Dark scrollbar
`field-sizing-content`	field-sizing: content	Auto-resize textarea (v4)
`field-sizing-fixed`	field-sizing: fixed	Fixed size textarea

<textarea class="field-sizing-content resize-none w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="লিখুন..."></textarea>

🔷 Scroll Snap ও Scroll Behavior

Class	CSS
`scroll-smooth`	scroll-behavior: smooth
`scroll-auto`	scroll-behavior: auto
`snap-x`	scroll-snap-type: x mandatory
`snap-y`	scroll-snap-type: y mandatory
`snap-both`	scroll-snap-type: both mandatory
`snap-mandatory`	…mandatory
`snap-proximity`	…proximity
`snap-start`	scroll-snap-align: start
`snap-center`	scroll-snap-align: center
`snap-end`	scroll-snap-align: end
`snap-always`	scroll-snap-stop: always
`scroll-mt-4`	scroll-margin-top: 1rem
`scroll-pt-4`	scroll-padding-top: 1rem
`scrollbar-thin`	scrollbar-width: thin
`scrollbar-none`	scrollbar-width: none
`scrollbar-auto`	scrollbar-width: auto
`scrollbar-color-blue-500/gray-100`	scrollbar-color: thumb track
`scrollbar-gutter-auto`	scrollbar-gutter: auto (default)
`scrollbar-gutter-stable`	scrollbar-gutter: stable — scrollbar space always reserved (layout jump নেই)
`scrollbar-gutter-stable-both-edges`	scrollbar-gutter: stable both-edges

<div class="flex snap-x snap-mandatory overflow-x-auto gap-4 p-4"> <div class="snap-center shrink-0 w-64 h-48 bg-blue-100 rounded-xl">Slide 1</div> <div class="snap-center shrink-0 w-64 h-48 bg-green-100 rounded-xl">Slide 2</div> <div class="snap-center shrink-0 w-64 h-48 bg-red-100 rounded-xl">Slide 3</div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🎨 SVG Utilities ও Accessibility

Icon এবং SVG-এর styling এবং accessibility-র জন্য Tailwind utilities।

🔷 SVG — Fill ও Stroke

Class	CSS	ব্যবহার
`fill-current`	fill: currentColor	Text color inherit করে
`fill-blue-500`	fill: #3b82f6	নির্দিষ্ট রঙ
`fill-none`	fill: none	Fill বন্ধ
`stroke-current`	stroke: currentColor	Outline color inherit
`stroke-blue-500`	stroke: #3b82f6	নির্দিষ্ট stroke রঙ
`stroke-1`	stroke-width: 1	Thin stroke
`stroke-2`	stroke-width: 2	Normal stroke
`stroke-[1.5]`	stroke-width: 1.5	Arbitrary stroke
`stroke-none`	stroke: none	Stroke বন্ধ

<svg class="size-6 text-blue-500 fill-current" viewBox="0 0 24 24">...</svg>  <svg class="size-6 stroke-current text-gray-700 fill-none stroke-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m..."></path> </svg>  <button class="text-gray-500 hover:text-blue-500 transition-colors"> <svg class="size-5 fill-current">...</svg> </button>

🔷 Accessibility Utilities

Class	CSS	ব্যবহার
`sr-only`	position: absolute; width: 1px; height: 1px; overflow: hidden…	Screen reader-এ দেখাবে, visually লুকানো
`not-sr-only`	sr-only reset	sr-only বাতিল করো
`forced-color-adjust-auto`	forced-color-adjust: auto	Windows High Contrast mode
`forced-color-adjust-none`	forced-color-adjust: none	Custom colors maintain করো

<button class="p-2 rounded-lg hover:bg-gray-100"> <span class="sr-only">Search</span>  <svg class="size-5 fill-current text-gray-600" ...>...</svg> </button>  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-white focus:z-50 focus:p-4 focus:rounded-lg focus:shadow-lg"> মূল বিষয়বস্তুতে যাও </a>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🎭 Masks ও Blend Modes — v4.1 নতুন

Mask utilities দিয়ে element-এর দৃশ্যমানতা নিয়ন্ত্রণ করো। Blend modes দিয়ে layer mixing করো।

🔷 Mask Image Utilities (Tailwind v4.1 নতুন!)

mask-* utilities দিয়ে element-এর কোন অংশ দেখাবে তা control করা যায়। Image, gradient অথবা SVG দিয়ে mask তৈরি করো।

Class	CSS	কাজ
`mask-none`	mask-image: none	Mask বন্ধ
`mask-linear-to-r`	mask-image: linear-gradient(to right, …)	Right-এ fade out
`mask-linear-to-b`	mask-image: linear-gradient(to bottom, …)	Bottom-এ fade out
`mask-radial`	mask-image: radial-gradient(…)	Center থেকে fade
`mask-from-black`	--mask-from-color: #000	Visible start
`mask-to-transparent`	--mask-to-color: transparent	Transparent end
`mask-size-cover`	mask-size: cover	Cover the element
`mask-repeat-no-repeat`	mask-repeat: no-repeat	No repeat
`mask-clip-content`	mask-clip: content-box	Content area-য় clip
`mask-composite-add`	mask-composite: add	Multiple mask যোগ
`mask-composite-intersect`	mask-composite: intersect	Intersection
`mask-alpha`	mask-mode: alpha	Alpha channel use
`mask-luminance`	mask-mode: luminance	Brightness use
`mask-position-center`	mask-position: center	Mask position
`mask-position-top`	mask-position: top
`mask-origin-content`	mask-origin: content-box	Mask origin
`mask-origin-border`	mask-origin: border-box
`mask-origin-padding`	mask-origin: padding-box
`mask-type-alpha`	mask-type: alpha	SVG mask type
`mask-type-luminance`	mask-type: luminance

<div class="relative"> <p class="text-gray-800 leading-relaxed"> লম্বা টেক্সট... আরো লম্বা টেক্সট... </p> <div class="absolute bottom-0 left-0 right-0 h-12 mask-linear-to-t mask-from-transparent mask-to-white"> </div> </div>  <img class="mask-linear-to-b mask-from-black mask-to-transparent" src="hero.jpg" alt="Hero" />

🔷 Text Shadow (Tailwind v4.1 নতুন!)

Class	CSS
`text-shadow-2xs`	text-shadow: 0 1px 0 rgba(0,0,0,0.15)
`text-shadow-xs`	text-shadow: 0 1px 1px rgba(0,0,0,0.15)
`text-shadow-sm`	text-shadow: 0 1px 2px rgba(0,0,0,0.15)
`text-shadow-md`	text-shadow: 0 2px 4px rgba(0,0,0,0.15)
`text-shadow-lg`	text-shadow: 0 4px 8px rgba(0,0,0,0.15)
`text-shadow-none`	text-shadow: none
`text-shadow-blue-500`	--tw-text-shadow-color: #3b82f6

<h1 class="text-6xl font-bold text-white text-shadow-lg"> আমার ওয়েবসাইট </h1>  <h2 class="text-4xl font-bold text-blue-600 text-shadow-md text-shadow-blue-200"> Feature Title </h2>

🔷 Mix Blend Mode ও Background Blend Mode

Class	CSS	Effect
`mix-blend-multiply`	mix-blend-mode: multiply	Darker colors multiply হয়
`mix-blend-screen`	mix-blend-mode: screen	Colors lighten হয়
`mix-blend-overlay`	mix-blend-mode: overlay	Contrast বাড়ায়
`mix-blend-darken`	mix-blend-mode: darken	Dark color রাখে
`mix-blend-lighten`	mix-blend-mode: lighten	Light color রাখে
`mix-blend-color-dodge`	mix-blend-mode: color-dodge	Bright effect
`mix-blend-difference`	mix-blend-mode: difference	Inverted look
`mix-blend-exclusion`	mix-blend-mode: exclusion	Softer difference
`mix-blend-hue`	mix-blend-mode: hue	Hue of top, base lum/sat
`mix-blend-normal`	mix-blend-mode: normal	Default
`bg-blend-multiply`	background-blend-mode: multiply	BG layers blend
`bg-blend-screen`	background-blend-mode: screen

<div class="relative bg-blue-900"> <img class="w-full h-64 object-cover mix-blend-multiply opacity-70" src="bg.jpg" alt=""> <h1 class="absolute inset-0 flex items-center justify-center text-white text-4xl font-bold"> Overlay Text </h1> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🌐 Logical Properties — RTL/LTR Support

Logical properties দিয়ে Left-to-Right এবং Right-to-Left উভয় ভাষার layout সহজে সমর্থন করো।

🔷 Logical Properties কী এবং কেন?

সাধারণত আমরা pl-4 লিখি মানে left padding। কিন্তু Arabic, Hebrew-এর মতো RTL (Right-to-Left) ভাষায় এটি ভুল side-এ যাবে। Logical properties (ps-4) writing direction অনুযায়ী automatically সঠিক side বেছে নেয়।

Physical	Logical	LTR-তে	RTL-তে
`pl-4`	`ps-4`	left	right
`pr-4`	`pe-4`	right	left
`ml-4`	`ms-4`	left	right
`mr-4`	`me-4`	right	left
`text-left`	`text-start`	left	right
`text-right`	`text-end`	right	left
`border-l`	`border-s`	left border	right border
`border-r`	`border-e`	right border	left border
`rounded-l`	`rounded-s`	left corners	right corners
`rounded-r`	`rounded-e`	right corners	left corners
`w-*`	`inline-size-*`	width	height (vertical text-এ)
`h-*`	`block-size-*`	height	width (vertical text-এ)

<a class="flex items-center gap-3 px-4 ps-4 pe-6 py-2 rounded-lg hover:bg-gray-100">  <span class="text-gray-600">Dashboard</span> </a>  <html lang="ar" dir="rtl"> <div class="ps-6 pe-2 ms-auto border-s-2 border-blue-500 text-start"> عربي  </div> </html>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

✍️ Typography — বাকি সব Utilities

Typography section-এ যা বাদ পড়েছিল — white-space, content, hyphens ও আরো।

🔷 White Space ও Word Break

Class	CSS	ব্যবহার
`whitespace-normal`	white-space: normal	Default
`whitespace-nowrap`	white-space: nowrap	Wrap বন্ধ
`whitespace-pre`	white-space: pre	Space/newline maintain
`whitespace-pre-line`	white-space: pre-line	Newline maintain
`whitespace-pre-wrap`	white-space: pre-wrap	Pre + wrap
`whitespace-break-spaces`	white-space: break-spaces	Space break allowed
`break-normal`	overflow-wrap: normal; word-break: normal	Default break
`break-words`	overflow-wrap: break-word	Long word break
`break-all`	word-break: break-all	Any character-এ break
`break-keep`	word-break: keep-all	CJK text break
`hyphens-none`	hyphens: none	Hyphenation বন্ধ
`hyphens-manual`	hyphens: manual	Soft hyphen শুধু
`hyphens-auto`	hyphens: auto	Auto hyphenation

🔷 Text Indent, Tab Size ও Vertical Align

Class	CSS
`indent-4`	text-indent: 1rem
`indent-8`	text-indent: 2rem
`indent-[3ch]`	text-indent: 3ch (arbitrary)
`tab-2`	tab-size: 2
`tab-4`	tab-size: 4
`align-baseline`	vertical-align: baseline
`align-top`	vertical-align: top
`align-middle`	vertical-align: middle
`align-bottom`	vertical-align: bottom
`align-text-top`	vertical-align: text-top
`align-sub`	vertical-align: sub
`align-super`	vertical-align: super

🔷 Content Property ও List Style

/* Before/After content */ <div class="before:content-['→'] before:mr-2 text-gray-700"> Item with arrow </div> <div class="after:content-['*'] after:text-red-500 after:ml-1"> Required field </div> /* Counter দিয়ে auto numbering */ <div class="counter-[items]"> <div class="before:content-[counter(items)]">...</div> </div>

Class	CSS
`list-disc`	list-style-type: disc
`list-decimal`	list-style-type: decimal
`list-none`	list-style-type: none
`list-inside`	list-style-position: inside
`list-outside`	list-style-position: outside
`list-image-[url(...)]`	list-style-image: url(…)

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📐 Layout — বাকি সব Utilities

Columns, Float, Aspect Ratio, Box Sizing, Visibility — যা আগে বাদ পড়েছিল।

🔷 Columns — Multi-column Layout

Class	CSS	ব্যবহার
`columns-2`	columns: 2	2 column newspaper layout
`columns-3`	columns: 3	3 column layout
`columns-sm`	columns: 24rem	Min width-based columns
`columns-md`	columns: 28rem
`break-before-column`	break-before: column	Column break force করো
`break-inside-avoid`	break-inside: avoid	Element-এর মাঝে break না
`break-after-page`	break-after: page	Print page break

<div class="columns-3 gap-4"> <div class="break-inside-avoid mb-4 bg-white rounded-lg p-4 shadow">Short card</div> <div class="break-inside-avoid mb-4 bg-white rounded-lg p-4 shadow"> Longer card with more content that takes up more space </div> <div class="break-inside-avoid mb-4 bg-white rounded-lg p-4 shadow">Medium card</div> </div>

🔷 Aspect Ratio, Float ও অন্যান্য

Class	CSS	ব্যবহার
`aspect-square`	aspect-ratio: 1/1	Perfect square
`aspect-video`	aspect-ratio: 16/9	Video embed
`aspect-auto`	aspect-ratio: auto	Default
`aspect-3/4`	aspect-ratio: 3/4	Portrait image
`float-left`	float: left	Text wrap around image
`float-right`	float: right
`float-none`	float: none	Float reset
`clear-left`	clear: left	Float bypass
`clear-both`	clear: both	Both float clear
`box-border`	box-sizing: border-box	Padding/border included in size
`box-content`	box-sizing: content-box	Padding/border excluded
`isolate`	isolation: isolate	New stacking context
`isolation-auto`	isolation: auto	Default
`visible`	visibility: visible	Visible (space নেয়)
`invisible`	visibility: hidden	Hidden (space নেয়)
`collapse`	visibility: collapse	Table row/column hide
`z-0` – `z-50`	z-index: 0–50	Stacking order
`z-auto`	z-index: auto	Default stacking
`z-[100]`	z-index: 100	Arbitrary z-index

🔷 Object Position ও Box Decoration Break

Class	CSS	কাজ
`object-center`	object-position: center	Image center align
`object-top`	object-position: top	Image top align
`object-bottom`	object-position: bottom	Image bottom align
`object-left`	object-position: left	Image left align
`object-right`	object-position: right	Image right align
`object-left-top`	object-position: left top	Top-left corner
`object-[25%_75%]`	object-position: 25% 75%	Arbitrary position
`box-decoration-clone`	box-decoration-break: clone	Multi-line span: প্রতিটি line fragment নিজের padding/border পাবে
`box-decoration-slice`	box-decoration-break: slice	Multi-line span: ধারাবাহিক একটি element

<div class="w-48 h-48 overflow-hidden rounded-full"> <img class="w-full h-full object-cover object-top" src="portrait.jpg" alt="User"> </div>  <span class="box-decoration-clone bg-blue-600 text-white px-3 py-1 rounded leading-loose"> এটি একটি multi-line highlighted text </span>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

🔭 Transform — Perspective ও Advanced

Backface visibility, perspective, zoom ও transform-style utilities।

🔷 Perspective ও 3D Transform Advanced

Class	CSS	ব্যবহার
`perspective-none`	perspective: none	3D depth বন্ধ
`perspective-dramatic`	perspective: 100px	Strong depth effect
`perspective-near`	perspective: 300px	Close perspective
`perspective-normal`	perspective: 500px	Normal depth
`perspective-midrange`	perspective: 800px	Mid perspective
`perspective-distant`	perspective: 1200px	Subtle depth
`perspective-[800px]`	perspective: 800px	Arbitrary
`perspective-origin-center`	perspective-origin: center	Center vanishing point
`perspective-origin-top-left`	perspective-origin: top left
`transform-style-3d`	transform-style: preserve-3d	Children 3D space-এ
`transform-style-flat`	transform-style: flat	2D flatten
`backface-visible`	backface-visibility: visible	Back face দেখা যায়
`backface-hidden`	backface-visibility: hidden	Back face লুকানো
`zoom-in`	zoom: in	Zoom in cursor
`zoom-out`	zoom: out	Zoom out cursor
`zoom-normal`	zoom: 1	No zoom
`zoom-[150%]`	zoom: 150%	Arbitrary zoom

<div class="perspective-normal w-48 h-64 cursor-pointer group"> <div class="relative w-full h-full transition-all duration-500 transform-style-3d group-hover:rotate-y-180">  <div class="absolute inset-0 backface-hidden bg-blue-500 rounded-xl flex items-center justify-center text-white"> Front </div>  <div class="absolute inset-0 backface-hidden rotate-y-180 bg-green-500 rounded-xl flex items-center justify-center text-white"> Back! </div> </div> </div>

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!

📋 Class Reference — সম্পূর্ণ Quick Lookup

Tailwind CSS-এর সব category-র গুরুত্বপূর্ণ class এক জায়গায় — চট করে খুঁজে নাও।

🔷 Layout Quick Reference

Class	CSS / কাজ
`container mx-auto px-4`	Centered responsive container
`block / inline-block / inline`	Display type
`hidden`	display: none
`hidden md:block`	Desktop-only element
`block md:hidden`	Mobile-only element
`aspect-video`	aspect-ratio: 16/9 — Video embed
`aspect-square`	aspect-ratio: 1/1 — Perfect square
`columns-3 gap-4`	3-column masonry layout
`float-left mr-4`	Float image (text wrap)
`overflow-hidden`	Clip overflow content
`overflow-x-auto`	Horizontal scroll
`overscroll-contain`	Prevent scroll chaining
`isolate`	New stacking context
`visible / invisible`	Show/hide (space রাখে)
`z-10 / z-50 / z-[100]`	Z-index stacking
`box-border`	box-sizing: border-box (default in Tailwind)

🔷 Flexbox Quick Reference

Class	CSS / কাজ
`flex items-center justify-between`	Flex with space between
`flex items-center justify-center`	Center everything
`flex flex-col gap-4`	Vertical flex with gap
`flex-wrap`	Wrap to next line
`flex-1`	flex: 1 1 0% — grow to fill
`flex-none`	flex: none — no grow/shrink
`shrink-0`	flex-shrink: 0
`grow`	flex-grow: 1
`order-first / order-last`	Visual reorder
`basis-1/2`	flex-basis: 50%
`self-start / self-end / self-center`	Individual align

🔷 Grid Quick Reference

Class	CSS / কাজ
`grid grid-cols-3 gap-6`	3 column grid
`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`	Responsive grid
`col-span-2`	2 column span
`col-start-2 col-end-4`	Specific column placement
`grid-rows-3`	3 rows defined
`row-span-2`	2 row span
`grid-flow-col`	Column-first auto placement
`auto-cols-fr`	Equal-width auto columns
`auto-rows-auto`	grid-auto-rows: auto
`auto-rows-fr`	grid-auto-rows: minmax(0,1fr)
`auto-rows-min`	grid-auto-rows: min-content
`auto-rows-max`	grid-auto-rows: max-content
`place-items-center`	Center items in grid cells

🔷 Spacing ও Sizing Quick Reference

Class	Value	কাজ
`p-4`	padding: 1rem	All sides
`px-6 py-3`	Horizontal/Vertical	Button padding
`pt-4 pb-8`	Top/Bottom	Section padding
`ps-4 pe-4`	Inline start/end	RTL-safe padding
`m-auto`	margin: auto	Center element
`mx-auto`	Horizontal auto	Center horizontally
`-mt-4`	Negative margin	Overlap elements
`space-x-4`	Horizontal child gap	Flex child spacing
`space-y-2`	Vertical child gap	List item spacing
`w-full / w-1/2 / w-64`	100% / 50% / 16rem	Width
`h-screen / h-full / h-64`	100vh / 100% / 16rem	Height
`min-h-screen`	min-height: 100vh	Full page section
`max-w-xl / max-w-4xl`	Responsive max-width	Content container
`size-6`	width+height: 1.5rem	Icon sizing (v4)
`inline-size-full`	inline-size: 100%	Logical width

🔷 Typography Quick Reference

Class	CSS / কাজ
`text-xl font-bold`	1.25rem bold
`text-sm text-gray-500`	Small muted text
`text-3xl font-black tracking-tight`	Display heading
`leading-relaxed`	line-height: 1.625
`tracking-wide / tracking-tight`	letter-spacing
`line-clamp-2`	2 লাইনে truncate
`text-balance`	Balanced text wrap (headings-এ)
`text-pretty`	Better orphan control
`whitespace-nowrap`	No text wrapping
`truncate`	overflow:hidden + ellipsis
`break-words`	Long URL/word break
`indent-8`	First line indent
`uppercase / lowercase / capitalize`	Text transform
`underline decoration-2 decoration-blue-500`	Custom underline
`font-stretch-expanded`	Variable font width
`text-shadow-md`	Text shadow (v4.1)
`antialiased`	Smooth font rendering
`tabular-nums`	Monospace numbers

🔷 Colors ও Background Quick Reference

Class	CSS / কাজ
`bg-blue-500`	background-color: oklch(…) (v4)
`bg-blue-500/50`	50% opacity background
`text-gray-900`	Dark text color
`text-white/80`	80% opacity white text
`bg-linear-to-r from-blue-500 to-purple-500`	Linear gradient →
`bg-linear-45 from-pink-500 to-orange-400`	45° gradient (v4)
`bg-radial from-white to-blue-100`	Radial gradient (v4)
`bg-conic from-red-500 via-blue-500 to-red-500`	Conic gradient (v4)
`bg-cover bg-center`	Background image cover
`bg-no-repeat`	No background repeat
`bg-clip-text text-transparent`	Gradient text effect
`bg-white/80 backdrop-blur-md`	Frosted glass effect

🔷 Borders ও Effects Quick Reference

Class	CSS / কাজ
`border border-gray-300`	1px solid border
`border-2 border-blue-500`	2px colored border
`border-t border-b`	Top/bottom border only
`border-s border-e`	Logical start/end border (RTL)
`border-dashed / border-dotted`	Border style
`rounded-lg / rounded-xl / rounded-full`	Border radius
`rounded-t-xl`	Top only radius
`outline-none`	Remove focus outline
`ring-2 ring-blue-500`	Focus ring
`ring-offset-2`	Ring with offset
`shadow-md / shadow-xl`	Box shadow
`shadow-blue-500/20`	Colored shadow (v4)
`inset-shadow-sm`	Inner shadow (v4)
`opacity-50`	50% opacity
`mix-blend-multiply`	Layer blend mode

🔷 Interactivity ও State Quick Reference

Class/Pattern	কাজ
`cursor-pointer / cursor-not-allowed`	Cursor type
`select-none`	Text selection বন্ধ
`pointer-events-none`	Click-through করে
`resize-none`	Textarea resize বন্ধ
`appearance-none`	Native style reset (select, input)
`caret-blue-500`	Input cursor রঙ
`accent-blue-500`	Checkbox/radio রঙ
`field-sizing-content`	Auto-resize textarea (v4)
`snap-x snap-mandatory`	Horizontal scroll snap
`snap-center`	Child snap alignment
`scroll-smooth`	Smooth scroll behavior
`scrollbar-thin scrollbar-none`	Scrollbar styling
`will-change-transform`	GPU acceleration hint
`touch-pan-y`	Touch scroll direction control

🔷 State Variant Patterns

Pattern	কাজ
`hover:bg-blue-700 transition-colors`	Smooth color hover
`hover:scale-105 transition-transform`	Scale up on hover
`hover:shadow-xl transition-shadow`	Shadow on hover
`active:scale-95`	Click press feedback
`focus:ring-2 focus:ring-blue-500 outline-none`	Custom focus ring
`focus-visible:ring-2`	Keyboard-only focus
`disabled:opacity-50 disabled:cursor-not-allowed`	Disabled state
`group hover:group-hover:opacity-100`	Parent hover trigger
`peer-focus:text-blue-500`	Sibling state trigger
`dark:bg-gray-900 dark:text-white`	Dark mode styles
`sm:grid-cols-2 lg:grid-cols-4`	Responsive breakpoints
`@sm:grid-cols-2`	Container query breakpoint
`first:pt-0 last:pb-0`	First/last child
`odd:bg-gray-50 even:bg-white`	Alternating rows
`not-[:last-child]:border-b`	:not() pseudo-class (v4)
`in-[.dark]:text-white`	Parent context (v4)
`nth-[2n+1]:bg-blue-50`	nth-child pattern (v4)

🔷 SVG ও Accessibility Quick Reference

Class	কাজ
`fill-current`	SVG fill = current text color
`fill-blue-500`	SVG নির্দিষ্ট রঙ
`stroke-current stroke-2`	Outline SVG icon
`size-5 fill-current`	Icon (w+h একসাথে)
`sr-only`	Screen reader শুধু (visually hidden)
`not-sr-only`	sr-only reset
`forced-color-adjust-auto`	Windows High Contrast mode

🔷 Tables Quick Reference

Class	CSS / কাজ
`border-collapse`	Cell borders merge
`border-separate border-spacing-2`	Separated borders with gap
`table-auto`	Content-based column width
`table-fixed`	Fixed column width
`caption-bottom`	Caption নিচে

🔷 Masks ও Effects Quick Reference (v4.1)

Class	কাজ
`mask-linear-to-b mask-from-black mask-to-transparent`	Bottom fade out
`mask-radial`	Center to edge fade
`text-shadow-md`	Medium text shadow
`text-shadow-lg text-shadow-blue-500`	Colored text shadow
`mix-blend-multiply`	Layer blend (dark effect)
`mix-blend-screen`	Layer blend (light effect)
`bg-blend-overlay`	Background image blend

🔷 Logical Properties Quick Reference

Physical	Logical	RTL-safe?
`pl-4 / pr-4`	`ps-4 / pe-4`	✅
`ml-4 / mr-4`	`ms-4 / me-4`	✅
`text-left / text-right`	`text-start / text-end`	✅
`border-l / border-r`	`border-s / border-e`	✅
`rounded-l / rounded-r`	`rounded-s / rounded-e`	✅

🔷 Common UI Patterns — Copy-Paste Ready

<section class="min-h-screen flex flex-col items-center justify-center text-center px-4"> <h1 class="text-5xl font-bold text-gray-900 mb-4 text-balance">Headline</h1> <p class="text-xl text-gray-600 max-w-2xl mb-8 text-pretty">Description</p> <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all hover:scale-105 active:scale-95"> CTA Button </button> </section>  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6"> <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-6 hover:-translate-y-1 transition-transform"> Card </div> </div>  <nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 shadow-sm"> <div class="container mx-auto flex items-center justify-between px-6 py-4"> <span class="font-bold text-xl">Logo</span> <div class="hidden md:flex gap-6"><a href="#" class="hover:text-blue-500 transition-colors">Link</a></div> </div> </nav>  <div class="space-y-4 max-w-md"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Name</label> <input class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all" /> </div> <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 active:scale-[0.98] transition-all"> Submit </button> </div>  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> New </span>  <h2 class="text-4xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> Gradient Heading </h2>  <div class="relative inline-block"> <img class="size-10 rounded-full object-cover" src="avatar.jpg" alt="User"> <span class="absolute bottom-0 right-0 size-3 bg-green-400 rounded-full border-2 border-white"></span> </div>  <div class="animate-pulse space-y-4"> <div class="h-4 bg-gray-200 rounded w-3/4"></div> <div class="h-4 bg-gray-200 rounded"></div> <div class="h-4 bg-gray-200 rounded w-5/6"></div> </div>  <div class="flex snap-x snap-mandatory overflow-x-auto gap-4 pb-4 scroll-smooth"> <div class="snap-center shrink-0 w-72 bg-white rounded-2xl shadow-md p-6">Slide 1</div> <div class="snap-center shrink-0 w-72 bg-white rounded-2xl shadow-md p-6">Slide 2</div> <div class="snap-center shrink-0 w-72 bg-white rounded-2xl shadow-md p-6">Slide 3</div> </div>

✅ Tailwind শেখার সেরা পদ্ধতি:

১. play.tailwindcss.com — browser-এ সরাসরি practice করো
২. VS Code-এ Tailwind CSS IntelliSense extension — autocomplete ও hover preview
③. tailwindcss.com/docs — official docs bookmark করো
④. Real project বানাও — একটি landing page দিয়ে শুরু করো

মাশাআল্লাহ! 🎉 এই section শেষ করেছেন — অসাধারণ! প্রজেক্টের কোডগুলো দেখে দেখে VS Code-এ নিজে টাইপ করুন — copy-paste করবেন না। কারণ হাতে টাইপ করলেই স্মৃতিতে গেঁথে যায়, মাথায় থাকে, বাস্তব অভিজ্ঞতা হয়, সাহস বাড়ে। শুধু পড়ে বা দেখে কেউ কখনো developer হয়নি। চলুন পড়ি! হাতে কলমে শিখি!