Lesson 5 of 3017%
(Progress persistence is disabled until Phase 9)
Tailwind CSS
Beginner
Responsive Design Basics
An introduction to making elements responsive using Tailwind prefixes.
Tailwind makes responsive design simple by using prefix modifiers.
Instead of writing media queries in CSS, you just prefix the class with a breakpoint name, like md:.
Breakpoints
sm:: Small screens (phones, 640px and up)md:: Medium screens (tablets, 768px and up)lg:: Large screens (laptops, 1024px and up)
<div class="text-center md:text-left">
This text is centered on mobile, but left-aligned on medium screens and larger.
</div>We will dive deeper into Responsive UI in a later section.
Try It Yourself