Tailwind CSS Größensteuerung

Tailwind CSS bietet eine Reihe prägnanter Utility-Klassen, die Entwicklern helfen, Elementabmessungen in HTML schnell zu steuern.

Im Folgenden finden Sie einige gängige Utility-Klassen zur Größensteuerung und deren Verwendung.

---

Breite - w-*

w-*Wird verwendet, um die Breite eines Elements festzulegen.

Tailwind bietet einige vordefinierte Breiten, die Pixel, Prozentangaben, Viewport-Einheiten usw. unterstützen.

Klassenname	Bedeutung	Beispiel
w-1/2	Breite auf die Hälfte des Elternelements setzen	<div class="w-1/2">Content</div>
w-1/4	Breite auf ein Viertel des Elternelements setzen	<div class="w-1/4">Content</div>
w-full	Breite auf 100% des Elternelements setzen	<div class="w-full">Content</div>
w-screen	Breite auf Viewport-Breite setzen	<div class="w-screen">Content</div>
w-64	Breite auf 16rem (256px) setzen	<div class="w-64">Content</div>
w-auto	Breite passt sich automatisch an den Inhalt an	<div class="w-auto">Content</div>

Verwenden Sie Utility-Klassen wie w-px, w-1, w-64, um eine feste Breite für ein Element festzulegen.

Verwenden Sie Utility-Klassen wie w-full, w-1/2, w-2/5, um prozentbasierte Elementbreiten festzulegen.

Verwenden Sie w-screen, damit ein Element die volle Breite des Viewports einnimmt.

<div class="w-screen">
  <!-- ... -->
</div>

Wenn Sie die festgelegte Breite eines Elements unter bestimmten Bedingungen entfernen müssen (z. B. bei einem bestimmten Breakpoint), kann die w-auto Utility nützlich sein:

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

Height - h-*

Höhenklassen werden verwendet, um die Höhe eines Elements festzulegen, wobei auch Pixel, Prozentwerte, Viewport-Einheiten usw. unterstützt werden. Gängige Höhen-Utility-Klassen sind:

Klassenname	Bedeutung	Beispiel
h-16	Höhe auf 4rem (64px) setzen	<div class="h-16">Content</div>
h-1/2	Höhe auf die Hälfte des übergeordneten Elements setzen	<div class="h-1/2">Content</div>
h-screen	Höhe auf Viewport-Höhe setzen	<div class="h-screen">Content</div>
h-auto	Höhe passt sich automatisch an den Inhalt an	<div class="h-auto">Content</div>

Verwenden Sie Utility-Klassen wie h-px, h-1, h-64, um eine feste Höhe für ein Element festzulegen.

Verwenden Sie h-full, um die Höhe eines Elements auf 100% seines übergeordneten Elements festzulegen, sofern das übergeordnete Element eine definierte Höhe hat.

<div class="h-48">
  <div class="h-full ...">
    <!-- 这个元素的高度将是 `12rem`（h-48） -->
  </div>
</div>

Verwenden Sie h-screen, damit ein Element die volle Höhe des Viewports einnimmt.

<div class="h-screen">
  <!-- ... -->
</div>

Verwenden Sie h-dvh, damit ein Element die volle Höhe des Viewports einnimmt; die Höhe ändert sich auch, wenn sich die Browser-Benutzeroberfläche ausdehnt oder zusammenzieht.

Scrollen Sie im Viewport nach oben und unten, um die Browser-Benutzeroberfläche auszublenden/einzublenden:

Verwenden Sie h-lvh, um die Höhe eines Elements auf die größtmögliche Höhe des Viewports festzulegen. Dies verhält sich genauso wie 100vh.

Scrollen Sie im Viewport nach oben und unten, um die Browser-Benutzeroberfläche auszublenden/einzublenden:

Verwenden Sie h-svh, um die Höhe eines Elements auf die kleinstmögliche Höhe des Viewports festzulegen.

<div class="h-svh">
  <!-- ... -->
</div>

---

Utility-Klassen für Größen

In Tailwind CSS,sizeUtility-Klassen ermöglichen es Ihnen, sowohl die Breite (width) und die Höhe (height). Diese Utility-Klassen werden typischerweise in Szenarien verwendet, die ein festes Breiten-Höhen-Verhältnis erfordern, wie das Erstellen von Quadraten, Kreisen oder Containern mit festen Proportionen.

size-*Klasse

Tailwind bietet einigesizeUtility-Klassen, mit denen sich dieBreite und Höheeines Elements auf denselben Wert setzen lassen.

Zu den häufig verwendeten Utility-Klassen gehören:

Klassenname	Bedeutung	Beispiel
size-0	Setzen Sie sowohl die Breite als auch die Höhe auf0	<div class="size-0">Content</div>
size-1	Setzen Sie sowohl die Breite als auch die Höhe auf0.25rem	<div class="size-1">Content</div>
size-2	Setzen Sie sowohl die Breite als auch die Höhe auf0.5rem	<div class="size-2">Content</div>
size-4	Setzen Sie sowohl die Breite als auch die Höhe auf1rem	<div class="size-4">Content</div>
size-8	Setzen Sie sowohl die Breite als auch die Höhe auf2rem	<div class="size-8">Content</div>
size-16	Setzen Sie sowohl die Breite als auch die Höhe auf4rem	<div class="size-16">Content</div>
size-32	Setzen Sie sowohl die Breite als auch die Höhe auf8rem	<div class="size-32">Content</div>
size-64	Setzen Sie sowohl die Breite als auch die Höhe auf16rem	<div class="size-64">Content</div>
size-auto	Setzen Sie sowohl die Breite als auch die Höhe auf auto-fit	<div class="size-auto">Content</div>

DiesesizeUtility-Klassen legen gleichzeitig denselben Wert sowohl für die Breite als auch für die Höhe eines Elements fest und werden häufig in Szenarien verwendet, die gleiche Breite und Höhe erfordern, wie z. B.:

• Kreisförmige Bilder
• Kartenkomponenten
• Elemente mit fester Größe wie Schaltflächen

Verwenden Sie Utility-Klassen wie size-px, size-1, size-64, um sowohl eine feste Breite als auch eine feste Höhe für ein Element festzulegen.

Verwenden Sie size-full, um die Breite und Höhe eines Elements auf 100% der Breite und Höhe des übergeordneten Containers festzulegen.

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

Wenn Sie die angegebene Breite und Höhe eines Elements unter bestimmten Bedingungen entfernen müssen (z. B. an einem bestimmten Breakpoint), kann die Utility-Klasse size-auto nützlich sein:

<div class="size-full md:size-auto">
  <!-- ... -->
</div>

Die Klasse size-auto eignet sich gut für Elemente, deren Abmessungen nicht fest sind und sich an die Größe ihres Inhalts anpassen.

Tailwind CSS unterstützt auch responsives Design, sodass unterschiedlichesizeUtility-Klassen bei unterschiedlichen Bildschirmgrößen verwendet werden können. Sie können unterschiedliche Breiten und Höhen für ein Element bei unterschiedlichen Bildschirmbreiten festlegen.

<div class="size-16 md:size-32 lg:size-64">
  This box's size will change based on the screen size.
</div>

Im obigen Code ist size-16 die Standardgröße, die auf mittleren Bildschirmen (md:) zu size-32 und auf großen Bildschirmen (lg:) zu size-64 wird.

---

Minimale Breite - min-w-*

min-w-*Wird verwendet, um die minimale Breite eines Elements festzulegen, sodass sichergestellt ist, dass das Element nicht kleiner als die angegebene Breite ist, wenn sein Inhalt nicht ausreicht.

Klassenname	Bedeutung	Beispiel
min-w-full	Minimale Breite auf 100% festlegen	<div class="min-w-full">Content</div>
min-w-0	Minimale Breite auf 0 festlegen	<div class="min-w-0">Content</div>
min-w-max	Minimale Breite auf die maximale Breite des Inhalts festlegen	<div class="min-w-max">Content</div>

---

Minimale Höhe - min-h-*

min-h-*Wird verwendet, um die minimale Höhe eines Elements festzulegen, sodass sichergestellt ist, dass die Höhe des Elements nicht kleiner als der angegebene Wert ist.

Klassenname	Bedeutung	Beispiel
min-h-0	Mindesthöhe auf 0 setzen	<div class="min-h-0">Content</div>
min-h-full	Mindesthöhe auf 100% des Elternelements setzen	<div class="min-h-full">Content</div>
min-h-screen	Mindesthöhe auf Viewport-Höhe setzen	<div class="min-h-screen">Content</div>

---

Maximale Breite - max-w-*

max-w-*Wird verwendet, um die maximale Breite eines Elements festzulegen. Wenn die Inhaltsbreite des Elements diesen Wert überschreitet, nimmt die Breite des Elements nicht weiter zu.

Klassenname	Bedeutung	Beispiel
max-w-xs	Maximale Breite festlegen auf20rem（320px）	<div class="max-w-xs">Content</div>
max-w-sm	Maximale Breite festlegen auf24rem（384px）	<div class="max-w-sm">Content</div>
max-w-full	Maximale Breite auf 100% des übergeordneten Containers festlegen	<div class="max-w-full">Content</div>

---

Maximale Höhe - max-h-*

max-h-*Wird verwendet, um die maximale Höhe eines Elements festzulegen. Wenn die Inhaltshöhe des Elements diesen Wert überschreitet, nimmt die Höhe des Elements nicht weiter zu.

Klassenname	Bedeutung	Beispiel
max-h-32	Maximale Höhe festlegen auf8rem（128px）	<div class="max-h-32">Content</div>
max-h-screen	Maximale Höhe auf Viewport-Höhe setzen	<div class="max-h-screen">Content</div>

---

Automatische Größe - auto

w-autoundh-autoDie Klasse wird verwendet, um die Breite oder Höhe eines Elements an seinen Inhalt anzupassen.

Klassenname	Bedeutung	Beispiel
w-auto	Breite passt sich automatisch an	<div class="w-auto">Content</div>
h-auto	Höhe passt sich automatisch an	<div class="h-auto">Content</div>

Andere Erweiterungen