Tailwind CSSBeginner
Responsive Design
Tailwind-এর breakpoint prefix দিয়ে responsive design — mobile-first approach বাংলায়।
9টি অংশবাংলা ভাষায়
Tailwind mobile-first responsive design ব্যবহার করে। প্রথমে মোবাইলের স্টাইল লিখুন, তারপর breakpoint prefix দিয়ে বড় স্ক্রিনের জন্য ঠিক করুন।
Breakpoints
| Prefix | মিনিমাম Width | ডিভাইস |
|---|---|---|
| (কোনো prefix নেই) | 0px | মোবাইল (default) |
| sm: | 640px | Small tablet |
| md: | 768px | Tablet |
| lg: | 1024px | Desktop |
| xl: | 1280px | Large desktop |
| 2xl: | 1536px | Extra large |
Responsive Classes
Mobile-first responsivehtml
html
<!-- মোবাইলে: 1 column, md: 2 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>Card 1</div>
<div>Card 2</div>
</div>
<!-- মোবাইলে: hidden, lg: block -->
<div class="hidden lg:block">Desktop-only content</div>
<!-- মোবাইলে: small text, lg: large text -->
<h1 class="text-2xl lg:text-4xl">Responsive heading</h1>Container Query (Tailwind v4)
Tailwind v4-তে container query support আছে — element-এর প্রস্থের উপর ভিত্তি করে responsive।
<div class="@container">
<div class="flex flex-col @md:flex-row">
<div>Sidebar</div>
<div>Main content</div>
</div>
</div>সবসময় mobile-first
Tailwind-এ prefix ছাড়া লেখা class mobile-এ প্রয়োগ হয়। prefix যোগ করলে সেই breakpoint ও তার উপর প্রয়োগ হয়। তাই সবসময় ছোট স্ক্রিন থেকে শুরু করুন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।