Responsive Design
Svep för att visa menyn
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.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 7
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 7
