Responsive Breakpoints
Understand sm, md, lg, xl and 2xl responsive prefixes.
Learning approach
Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.
Tailwind Example
HTML + Tailwind CSS
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-5">
<div class="p-5 bg-white shadow rounded-xl">
Card 1
</div>
<div class="p-5 bg-white shadow rounded-xl">
Card 2
</div>
<div class="p-5 bg-white shadow rounded-xl">
Card 3
</div>
<div class="p-5 bg-white shadow rounded-xl">
Card 4
</div>
</div>
Live Preview
Your Tailwind design will appear here.
Click Run Preview
See the lesson example here.
Test your understanding
Choose the best answer.
Which prefix is commonly used for medium-screen responsive styles?