Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind - Mini Project: Build & Apply

Responsive Card Layout with Tailwind Breakpoint Prefixes

📖 Scenario: You are building a simple card layout for a website. The cards should look good on all screen sizes, from small phones to large desktop monitors.

🎯 Goal: Create a responsive card layout using Tailwind CSS breakpoint prefixes sm, md, lg, xl, and 2xl to adjust the number of cards per row at different screen widths.

📋 What You'll Learn

Use Tailwind CSS breakpoint prefixes to control layout

Start with a single column on very small screens

Show two cards per row on small screens (sm)

Show three cards per row on medium screens (md)

Show four cards per row on large screens (lg)

Show five cards per row on extra large screens (xl)

Show six cards per row on 2xl screens

Use semantic HTML and accessible markup

💡 Why This Matters

🌍 Real World

Responsive card layouts are common on websites for product listings, blog posts, or portfolios. Using breakpoint prefixes helps the layout adapt smoothly to different devices.

💼 Career

Web developers often use Tailwind CSS to build responsive interfaces quickly. Understanding breakpoint prefixes is essential for creating layouts that work well on phones, tablets, and desktops.

1

Create the HTML structure with 6 cards

Create a <main> element with a class of container mx-auto p-4. Inside it, create a <section> with a class of grid gap-4. Inside the section, add 6 <article> elements each with a class of bg-white p-6 rounded shadow. Each article should contain an <h2> with text Card 1 through Card 6 respectively.

Tailwind

Need a hint?

Use a main container with padding and center alignment. Inside, use a section with grid and gap. Add 6 article cards with white background, padding, rounded corners, and shadow. Each card has a heading with the card number.

2

Add the base grid columns for smallest screens

Add the Tailwind class grid-cols-1 to the section element to make the grid show 1 column on the smallest screens.

Tailwind

Need a hint?

Add grid-cols-1 to the section's class list to show one column on the smallest screens.

3

Add breakpoint prefixes for responsive columns

Add these Tailwind classes to the section element to set columns at different breakpoints: sm:grid-cols-2, md:grid-cols-3, lg:grid-cols-4, xl:grid-cols-5, and 2xl:grid-cols-6.

Tailwind

Need a hint?

Add the breakpoint prefixes with grid-cols-N classes to the section to control columns on different screen sizes.

4

Add accessible headings and finalize layout

Ensure each <article> has an <h2> heading with the card number text from Card 1 to Card 6. Confirm the main and section elements have the correct classes for container and grid layout with breakpoints.

Tailwind

Need a hint?

Check that all cards have headings and the container and grid classes are correct for responsive layout.