Responsive Design

Tailwind uses responsive prefixes to apply styles at different screen sizes.

Responsive Prefixes

<div className="bg-blue-500 md:bg-green-500 lg:bg-red-500">
  Responsive Box
</div>

• default: blue background;
• md:: green on medium screens;
• lg:: red on large screens.

Responsive Layout

<div className="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

• flex-col: vertical layout on small screens;
• md:flex-row: horizontal layout on medium screens and above.

Responsive Text

<p className="text-sm md:text-lg">
  Responsive text
</p>

• text-sm: small text by default;
• md:text-lg: larger text on medium screens.

Use prefixes like sm:, md:, and lg: to adjust styles for different screen sizes.