Responsive Design
Learn how to make interfaces work across phones, tablets and desktops.
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="p-6 bg-slate-100">
<h2 class="text-xl md:text-3xl lg:text-5xl font-bold">
Responsive Heading
</h2>
<p class="mt-3 text-sm md:text-base lg:text-lg">
The text changes size at different screen widths.
</p>
</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?