❮ Previous Next ❯

Responsive Utilities

  • Use breakpoint prefixes for responsive styling.

  • What Are Responsive Utilities ?

    Responsive utilities are Tailwind classes that:

    • Change behavior based on screen size

    • Use predefined breakpoints

    • Follow a mobile-first approach

    Instead of writing media queries manually, Tailwind allows you to apply responsiveness directly in HTML.

    In Tailwind CSS, responsiveness is achieved by prefixing utilities with breakpoints.

    Mobile-First Behavior

    Tailwind is mobile-first by default.

    That means:

    • Base utilities apply to all screens (especially mobile)

    • Breakpoint-prefixed utilities override styles on larger screens

Responsive Text Utilities

text-sm applies on mobile, md:text-base on medium screens, and lg:text-lg on large screens. 

<p class="text-sm md:text-base lg:text-lg">
  Responsive text
</p>

  • Meaning:

    • Mobile → small text

    • Tablet → medium text

    • Desktop → large text

      How Responsive Utilities Work

      Responsive utility syntax:

      {breakpoint}:{utility}

      Example:

      md:flex

      lg:grid

      This means:

      • flex applies at md screen size and above

      • grid applies at lg screen size and above

      Base utilities remain active below those breakpoints.

      Commonly Used Responsive Utilities

      Responsive prefixes can be applied to almost every utility, including:

      • Layout (flex, grid, block)

      • Spacing (p-*, m-*, gap-*)

      • Typography (text-*, font-*)

      • Visibility (hidden, block)

      • Alignment (items-*, justify-*)

      • Width & height (w-*, h-*)

    Responsive Padding

    p-2 applies on mobile, md:p-4 on medium screens, and lg:p-8 on large screens. 

    <div class="p-2 md:p-4 lg:p-8">
  Responsive padding
</div>

    • Hiding & Showing Elements

      One of the most common responsive tasks is:

      Show something on one screen size, hide it on another.

      Tailwind makes this extremely simple.

      hidden and Display Utilities

      Tailwind uses display utilities for visibility:

      • hidden → display: none

      • block, flex, grid, etc. → visible states

    Mobile Only Visibility

    block shows the element on mobile and md:hidden hides it on medium screens and above. 

    <div class="block md:hidden">
  Mobile-only content
</div>

    • Explanation:

      • Mobile → visible

      • Tablet and above → hidden

      Used for:

      • Mobile menus

      • Compact UI elements

    Desktop Only Visibility

    hidden hides the element on mobile and md:block shows it on medium screens and above. 

    <div class="hidden md:block">
  Desktop-only content
</div>

    • Explanation:

      • Mobile → hidden

      • Tablet and above → visible

        Used for:

        • Sidebars

        • Large navigation menus

        • Extra UI elements

      Responsive Flex Layout

      flex-col stacks items on mobile and md:flex-row changes to a horizontal layout on larger screens. 

      <div class="flex flex-col md:flex-row gap-4">
  <div>Sidebar</div>
  <div>Main Content</div>
</div>

      • Meaning:

        • Mobile → stacked vertically

        • Desktop → side-by-side layout

        This is a core responsive pattern.

      Responsive Navigation Menu

      hidden md:flex shows the menu on larger screens while md:hidden shows the mobile menu button. 

      <nav class="flex items-center justify-between">
  <span>Logo</span>

  <ul class="hidden md:flex gap-6">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>

  <button class="md:hidden">
    ☰
  </button>
</nav>

      • Behavior:

        • Mobile → hamburger menu

        • Desktop → full navigation

        This is used in almost every website.

      Responsive Section Visibility

      hidden lg:block hides the sidebar on small screens and shows it on large screens. 

      <section class="grid grid-cols-1 lg:grid-cols-3">
  <aside class="hidden lg:block">
    Sidebar
  </aside>
  <main class="lg:col-span-2">
    Content
  </main>
</section>

      • Order of Utilities Matters

        Responsive overrides work from left to right.

        Correct:

        <div class="block md:hidden lg:block">

        Meaning:

        • Mobile → visible

        • Tablet → hidden

        • Large desktop → visible again

        This allows fine-grained control.

        Common Beginner Mistakes

        • Forgetting mobile-first behavior

        • Hiding important content on mobile

        • Using too many breakpoints

        • Duplicating content unnecessarily

        • Making layouts inconsistent across screens

        Responsive utilities should enhance UX, not fragment it.

        Best Practices for Responsive Utilities

        • Start with mobile layout

        • Hide content only when necessary

        • Prefer layout changes over hiding content

        • Use hidden and block intentionally

        • Test at every breakpoint

        • Keep HTML readable        

      ❮ Previous Next ❯