Learn Tailwind CSS - Responsive Design & Breakpoints

#Introduction

Websites are no longer only viewed on desktop screens. Responsive design is a hard requirement, and Tailwind makes it natural through its breakpoint system. Episode 5 covers the screens in the config, the mobile-first approach, using utilities per breakpoint, and complex patterns for edge cases.

The core concept is simple: write utilities without a prefix for the base mobile styles, then add breakpoint prefixes like md: and lg: to adjust the layout on larger screens. This differs from the traditional way of writing max-width media queries in CSS.

#The screens System in the Config

Tailwind provides five default breakpoints:

Default screens

screens: {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
}

All breakpoints are min-width based. That means md: activates when the viewport is at least 768px and applies upward, until the next breakpoint takes over. You can add your own names or change the default values in theme.extend.screens:

Adding custom breakpoints

theme: {
  extend: {
    screens: {
      "3xl": "1920px",
      tablet: "820px",
    },
  },
},

#Mobile-First Approach

Mobile-first means base styles (without prefix) are written for the smallest screens, then enhanced with prefixes. For example:

Mobile-first layout

<div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="bg-gray-100 p-4">Kartu 1</div>
  <div class="bg-gray-100 p-4">Kartu 2</div>
  <div class="bg-gray-100 p-4">Kartu 3</div>
</div>

grid-cols-1 is the mobile default, md:grid-cols-2 for tablets, and lg:grid-cols-3 for desktop. This md:grid-cols-2 pattern is the most common responsive pattern in Tailwind.

#Responsive Utilities per Breakpoint

#Basic Pattern

Almost every utility can take a breakpoint prefix: md:p-8, lg:text-2xl, xl:flex-row. What's often forgotten: hidden and flex are also responsive:

Showing and hiding

<div class="hidden md:block">Sidebar desktop</div>
<div class="md:hidden">Menu mobile</div>

md:block reveals an element starting at the md screen, and md:hidden hides it on the same screens — the standard technique for adaptive navigation.

#Arbitrary Values and Ranges

For viewports outside the defaults, use arbitrary breakpoints:

Arbitrary breakpoints

<div class="min-[700px]:grid-cols-2">Mulai dua kolom di 700px</div>
<div class="max-lg:block">Tampil di bawah lg</div>

The max- prefix turns the breakpoint into a max-width, so styles apply downward instead of upward. Combining min-md:max-lg:flex can target a specific viewport range — useful for genuinely special cases.

#Complex Breakpoint Patterns

Combining breakpoints and variants gives you great flexibility:

Responsive with variants

<button
  class="px-4 py-2 text-sm
         md:px-6 md:text-base
         hover:bg-blue-600
         lg:hover:bg-blue-700"
>
  Tombol
</button>

lg:hover:bg-blue-700 combines a breakpoint and a state — a different hover color on large screens. The writing order is always breakpoint:state:utility. Don't reverse it to hover:lg:bg-blue-700, which isn't recognized.

#Best Practices

• Write defaults first: start from mobile; don't copy base styles into every breakpoint.
• Avoid duplication: one element, one set of responsive classes; don't write md:p-4 lg:p-4.
• Use semantic variables: keep common classes on a component or in @apply so they don't repeat in many places.
• Test at real sizes: DevTools responsive mode helps you spot the points where things look off.

#Conclusion

Episode 5 rounds out your responsive layout knowledge: the min-width-based screens system, the mobile-first approach, per-breakpoint utilities, arbitrary breakpoints with min- and max-, and combining breakpoints with state patterns.

Key takeaways:

• Default screens: sm, md, lg, xl, 2xl — all min-width based.
• Write base styles for mobile, then enhance with prefixes.
• md:grid-cols-2 and md:hidden are the most common responsive patterns.
• The max- prefix targets smaller viewports; combining min-md:max-lg targets a range.
• Writing order is always breakpoint:state:utility.
• Avoid duplication and test at many screen sizes.

Next, in episode 6, we'll cover dark mode, theming, and CSS variables — the media versus class strategies, structuring themes with theme.extend, up to dynamic theme switching using CSS custom properties.