Responsive Design with Tailwind CSS

ওয়েব ডেভেলপমেন্ট জানুয়ারী ২০২৫ ব্যাচ
, ,
1

Responsive Design with Tailwind CSS কিভাবে করবো?

Tailwind CSS ব্যবহার করে সহজেই Responsive Design তৈরি করা যায়। এটি Mobile-First Approach অনুসরণ করে, তাই আপনি default styles মোবাইলের জন্য লিখবেন এবং larger screen sizes-এর জন্য breakpoints ব্যবহার করবেন।

:pushpin: Tailwind CSS Responsive Breakpoints

Tailwind CSS-এ Responsive Design এর জন্য নিচের Breakpoints গুলো ব্যবহার করা হয়:

Breakpoint Minimum Width Tailwind Class
sm 640px sm:
md 768px md:
lg 1024px lg:
xl 1280px xl:
2xl 1536px 2xl:

:dart: Responsive Design কিভাবে করবেন?

Tailwind CSS-এ breakpoints ব্যবহার করতে চাইলে, ক্লাসের আগে sm:, md:, lg:, xl:, 2xl: লিখতে হয়।

:pushpin: উদাহরণ ১: Responsive Text Size

<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  এই টেক্সট ছোট স্ক্রিনে ছোট এবং বড় স্ক্রিনে বড় হবে।
</p>

:small_blue_diamond: ব্যাখ্যা:

  • Default: text-base
  • sm: এ text-lg
  • md: এ text-xl
  • lg: এ text-2xl
  • xl: এ text-3xl

:pushpin: উদাহরণ ২: Responsive Grid Layout

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-red-500 p-4">2</div>
  <div class="bg-green-500 p-4">3</div>
  <div class="bg-yellow-500 p-4">4</div>
</div>

:small_blue_diamond: ব্যাখ্যা:

  • Mobile (Default) → ১ Column
  • sm: ২ Columns
  • md: ৩ Columns
  • lg: ৪ Columns

:pushpin: উদাহরণ ৩: Responsive Flexbox Layout

<div class="flex flex-col sm:flex-row gap-4">
  <div class="bg-gray-300 p-4">Item 1</div>
  <div class="bg-gray-400 p-4">Item 2</div>
  <div class="bg-gray-500 p-4">Item 3</div>
</div>

:small_blue_diamond: ব্যাখ্যা:

  • Default (Mobile) → Column Layout
  • sm: থেকে Row Layout হবে

:pushpin: উদাহরণ ৪: Responsive Button Design

<button class="px-4 py-2 bg-blue-500 text-white rounded-md 
  sm:px-6 sm:py-3 
  md:px-8 md:py-4">
  Click Me
</button>

:small_blue_diamond: ব্যাখ্যা:

  • Mobile (Default) → ছোট Button
  • sm: বড় padding
  • md: আরও বড় padding

:dart: Tailwind CSS দিয়ে Responsive Navbar

<header class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-white text-2xl">Brand</h1>
    <nav>
      <ul class="hidden md:flex space-x-4">
        <li><a href="#" class="text-white">Home</a></li>
        <li><a href="#" class="text-white">About</a></li>
        <li><a href="#" class="text-white">Services</a></li>
        <li><a href="#" class="text-white">Contact</a></li>
      </ul>
      <!-- Mobile Menu Button -->
      <button class="md:hidden text-white">☰</button>
    </nav>
  </div>
</header>

:small_blue_diamond: ব্যাখ্যা:

  • md:flex: Medium screen থেকে navbar দেখা যাবে
  • hidden md:flex: মোবাইলে navbar লুকিয়ে রাখবে
  • md:hidden: Mobile Menu button কেবল ছোট স্ক্রিনে দেখাবে

:dart: Tailwind CSS Responsive Image

<img src="image.jpg" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">

:small_blue_diamond: ব্যাখ্যা:

  • Default (Mobile): w-full (Full width)
  • sm: w-1/2
  • md: w-1/3
  • lg: w-1/4

:dart: Tailwind CSS Responsive Visibility

<div class="block sm:hidden">মোবাইলে দেখা যাবে, বড় স্ক্রিনে লুকিয়ে যাবে</div>
<div class="hidden sm:block">বড় স্ক্রিনে দেখা যাবে, মোবাইলে লুকিয়ে যাবে</div>

:fire: শেষ কথা

Tailwind CSS ব্যবহার করে খুব সহজে Responsive Design তৈরি করা যায়। sm:, md:, lg:, xl: এই breakpoints গুলো ব্যবহার করে আপনি যেকোনো Component বা Layout responsive করতে পারবেন।

:white_check_mark: Mobile-First Approach
:white_check_mark: CSS লিখতে সময় কম লাগে
:white_check_mark: Responsive Layout দ্রুত তৈরি করা যায়

:point_right: এখনই Tailwind CSS দিয়ে আপনার Project এ Responsive Design তৈরি করুন! :rocket:

6 Likes
2

ডিজাইন করার সময় আগে মোবাইল রেসপনসিভ করা উচিত নাকি ডেক্সটপ ভিউ করা উচিত? আগে ডেক্সটপ ভিউ করার পর রেসপনসিভ করতে ‍আমার সমস্যা হয়।

1 Like
3

Amar o aii taii Mona hoii asola konta usit

4

মোবাইল রেসপনসিভ ডিজাইন আগে করা উচিত, কারণ বর্তমানে বেশিরভাগ ইউজার মোবাইল ডিভাইস ব্যবহার করেন। মোবাইল থেকে শুরু করলে পরে ডেক্সটপ ভিউ অ্যাড করতে অনেক সহজ হয়। এটা “মোবাইল ফার্স্ট ডিজাইন” হিসেবে পরিচিত, যেখানে আপনি প্রথমে মোবাইলের জন্য ডিজাইন করেন এবং তারপর ধীরে ধীরে বড় স্ক্রীনে তা অ্যাডজাস্ট করেন। এতে ইউজার অভিজ্ঞতাও উন্নত হয়।

আপনি যদি ডেক্সটপ ভিউ প্রথম করেন, তবে রেসপনসিভ ডিজাইন করার সময় অনেক সমস্যা দেখা দিতে পারে, যেমন ফন্ট সাইজ, ইমেজ সাইজ, লেআউট ইত্যাদি। মোবাইল ফার্স্ট পদ্ধতি অনুসরণ করলে এই ধরনের সমস্যা কম হয়।