Storefronts need to work just as well on mobile devices as on large desktop screens. Tailwind handles responsive design through breakpoint prefixes directly on utility classes - with no separate media query blocks in the CSS.

Mobile-first as the core principle

Tailwind is mobile-first by default: a class with no prefix (grid-cols-1) applies at every screen size, and a prefix like md: only overrides it starting at that width. So you write the mobile layout first, then add prefixes to change it for larger screens - not the other way around.

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <!-- one column on mobile, two from tablet up, three from desktop up -->
</div>

The default breakpoints

• sm: - from 640px (larger phones in landscape)
• md: - from 768px (tablets)
• lg: - from 1024px (small desktops/laptops)
• xl: - from 1280px (desktop)
• 2xl: - from 1536px (large screens)

Custom breakpoints - say, an extra 3xl: for very wide displays - are defined via --breakpoint-* variables in @theme, as shown in chapter 11.

Typical responsive patterns

A few patterns that show up in practically every Hyvä template:

<!-- Navigation: mobile menu visible, desktop menu hidden (Alpine handles the toggle) -->
<nav class="block lg:hidden">...</nav>
<nav class="hidden lg:block">...</nav>

<!-- Spacing that gets more generous on larger screens -->
<section class="px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20">...</section>

<!-- Font size that grows with the screen -->
<h1 class="text-2xl md:text-3xl lg:text-4xl">...</h1>

hidden/block combined with a breakpoint prefix is the standard pattern for switching between a mobile and a desktop variant of the same UI element - with no JavaScript at all, purely through CSS.

Looking ahead: the grid for the team page

The team page we'll build starting in chapter 17 uses exactly this pattern: a grid with one column on mobile that opens up to two or three columns on larger screens - combined with Alpine filter logic that works independently of screen size.