Responsives Design

Tailwind CSS erleichtert es, responsive Designs zu erstellen, indem es Utility-Klassen für Breakpoints und Media Queries bereitstellt.

Breakpoints

Breakpoints in Tailwind CSS sind bei bestimmten Bildschirmgrößen definiert, sodass Sie verschiedene Stile bei unterschiedlichen Ansichtsbreiten anwenden können.

Standard-Breakpoints

Breakpoint	Beschreibung
`sm`	640px
`md`	768px
`lg`	1024px
`xl`	1280px
`2xl`	1536px

Diese Breakpoints können als Präfixe verwendet werden, um Stile bedingt basierend auf der Ansichtsbreite anzuwenden.

index.html

<!DOCTYPE html>

<head>

<title>Responsive Design - Example 1</title>

</head>

<body>

<div

class="bg-blue-500 p-4 sm:bg-green-500 md:bg-red-500 lg:bg-yellow-500 xl:bg-purple-500"

Responsive Background Color

</div>

</body>

</html>

Erklärung

bg-blue-500: Setzt die Hintergrundfarbe standardmäßig auf einen Blauton;
p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
sm:bg-green-500: Setzt die Hintergrundfarbe auf einen Grünton auf kleinen Bildschirmen und größer (min-width: 640px);
md:bg-red-500: Setzt die Hintergrundfarbe auf einen Rotton auf mittleren Bildschirmen und größer (min-width: 768px);
lg:bg-yellow-500: Setzt die Hintergrundfarbe auf einen Gelbton auf großen Bildschirmen und größer (min-width: 1024px);
xl:bg-purple-500: Setzt die Hintergrundfarbe auf einen Lilaton auf extra großen Bildschirmen und größer (min-width: 1280px).

Anwenden von responsiven Stilen

Sie können responsive Stile auf jede Utility-Klasse in Tailwind CSS anwenden, indem Sie sie mit einem Breakpoint versehen.

index.html

<!DOCTYPE html>

<head>

<title>Responsive Design - Example 2</title>

</head>

<body>

<div

class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12 sm:text-sm md:text-base lg:text-lg xl:text-xl sm:font-light md:font-normal lg:font-semibold xl:font-bold"

Responsiveness

</div>

</body>

</html>

Erklärung

Abstand:

p-4: Fügt standardmäßig einen Abstand von 1rem (16px) auf allen Seiten hinzu;
sm:p-6: Fügt einen Abstand von 1.5rem (24px) auf allen Seiten für kleine Bildschirme und größer (min-width: 640px) hinzu;
md:p-8: Fügt einen Abstand von 2rem (32px) auf allen Seiten für mittlere Bildschirme und größer (min-width: 768px) hinzu;
lg:p-10: Fügt einen Abstand von 2.5rem (40px) auf allen Seiten für große Bildschirme und größer (min-width: 1024px) hinzu;
xl:p-12: Fügt einen Abstand von 3rem (48px) auf allen Seiten für extra-große Bildschirme und größer (min-width: 1280px) hinzu.

Textgröße:

sm:text-sm: Setzt die Schriftgröße auf klein (0.875rem oder 14px) für kleine Bildschirme und größer (min-width: 640px);
md:text-base: Setzt die Schriftgröße auf Basis (1rem oder 16px) für mittlere Bildschirme und größer (min-width: 768px);
lg:text-lg: Setzt die Schriftgröße auf groß (1.125rem oder 18px) für große Bildschirme und größer (min-width: 1024px);
xl:text-xl: Setzt die Schriftgröße auf extra-groß (1.25rem oder 20px) für extra-große Bildschirme und größer (min-width: 1280px).

Schriftgewicht:

sm:font-light: Wendet leichtes Schriftgewicht für kleine Bildschirme und größer (min-width: 640px) an;
md:font-normal: Wendet normales Schriftgewicht für mittlere Bildschirme und größer (min-width: 768px) an;
lg:font-semibold: Wendet halbfettes Schriftgewicht für große Bildschirme und größer (min-width: 1024px) an;
xl:font-bold: Wendet fettes Schriftgewicht für extra-große Bildschirme und größer (min-width: 1280px) an.