Responsive Design
Stryg for at vise menuen
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 alt klart?
Tak for dine kommentarer!
Sektion 1. Kapitel 7
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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 alt klart?
Tak for dine kommentarer!
Sektion 1. Kapitel 7
