Responsive BreakpointsZustände (Varianten)AbständeGrößeAnzeigeFlexboxAusrichtungRasterPositionTypografieTextausrichtung & DekorationFarbenRahmenEffekteÜbergänge & AnimationTransformationenÜberlauf & SonstigesFarbpalette
#Responsive Breakpoints
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
sm: | @media (min-width: 640px) | Kleine Bildschirme und größer | |
md: | @media (min-width: 768px) | Mittlere Bildschirme und größer | |
lg: | @media (min-width: 1024px) | Große Bildschirme und größer | |
xl: | @media (min-width: 1280px) | Extra große Bildschirme und größer | |
2xl: | @media (min-width: 1536px) | 2x Extra große Bildschirme und größer |
#Zustände (Varianten)
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
hover: | :hover | Bei Mauszeiger-Hover | |
focus: | :focus | Bei Fokus | |
active: | :active | Beim Klicken | |
disabled: | :disabled | Wenn deaktiviert | |
first: | :first-child | Erstes Kind | |
last: | :last-child | Letztes Kind | |
odd: | :nth-child(odd) | Ungerade Kinder | |
even: | :nth-child(even) | Gerade Kinder | |
group-hover: | .group:hover & | Bei Hover über Elterngruppe | |
dark: | @media (prefers-color-scheme: dark) | Dunkelmodus |
#Abstände
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
p-{size} | padding | Innenabstand auf allen Seiten | |
px-{size} | padding-left/right | Horizontaler Innenabstand | |
py-{size} | padding-top/bottom | Vertikaler Innenabstand | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | Einseitiger Innenabstand | |
m-{size} | margin | Außenabstand auf allen Seiten | |
mx-{size} | margin-left/right | Horizontaler Außenabstand | |
my-{size} | margin-top/bottom | Vertikaler Außenabstand | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | Einseitiger Außenabstand | |
mx-auto | margin: 0 auto | Horizontal zentrieren | |
gap-{size} | gap | Flex/Grid-Abstand | |
gap-x-{size} | column-gap | Horizontaler Abstand | |
gap-y-{size} | row-gap | Vertikaler Abstand | |
space-x-{size} | > * + * { margin-left } | Horizontaler Abstand zwischen Kindern | |
space-y-{size} | > * + * { margin-top } | Vertikaler Abstand zwischen Kindern |
#Größe
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
w-{size} | width | Breite | |
w-full | width: 100% | Volle Breite | |
w-screen | width: 100vw | Bildschirmbreite | |
w-auto | width: auto | Automatische Breite | |
w-fit | width: fit-content | An Inhalt anpassen | |
min-w-0 | min-width: 0 | Mindestbreite 0 | |
min-w-full | min-width: 100% | Mindestbreite 100% | |
max-w-{size} | max-width | Maximale Breite | |
max-w-screen-{bp} | max-width: breakpoint | Breakpoint-Maximalbreite | |
h-{size} | height | Höhe | |
h-full | height: 100% | Volle Höhe | |
h-screen | height: 100vh | Bildschirmhöhe | |
min-h-screen | min-height: 100vh | Minimale Bildschirmhöhe | |
max-h-{size} | max-height | Maximale Höhe | |
size-{size} | width + height | Breite und Höhe zusammen |
#Anzeige
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
block | display: block | Block-Element | |
inline-block | display: inline-block | Inline-Block | |
inline | display: inline | Inline-Element | |
flex | display: flex | Flex-Container | |
inline-flex | display: inline-flex | Inline-Flex | |
grid | display: grid | Grid-Container | |
inline-grid | display: inline-grid | Inline-Grid | |
hidden | display: none | Versteckt | |
contents | display: contents | Nur Inhalt |
#Flexbox
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
flex-row | flex-direction: row | Horizontale Richtung | |
flex-col | flex-direction: column | Vertikale Richtung | |
flex-row-reverse | flex-direction: row-reverse | Horizontal umgekehrt | |
flex-col-reverse | flex-direction: column-reverse | Vertikal umgekehrt | |
flex-wrap | flex-wrap: wrap | Umbruch erlauben | |
flex-nowrap | flex-wrap: nowrap | Kein Umbruch | |
flex-1 | flex: 1 1 0% | Verbleibenden Platz füllen | |
flex-auto | flex: 1 1 auto | Automatische Größe | |
flex-none | flex: none | Feste Größe | |
grow | flex-grow: 1 | Wachsen erlauben | |
grow-0 | flex-grow: 0 | Wachsen verhindern | |
shrink | flex-shrink: 1 | Schrumpfen erlauben | |
shrink-0 | flex-shrink: 0 | Schrumpfen verhindern |
#Ausrichtung
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
justify-start | justify-content: flex-start | Hauptachse Anfang | |
justify-center | justify-content: center | Hauptachse Mitte | |
justify-end | justify-content: flex-end | Hauptachse Ende | |
justify-between | justify-content: space-between | Platz dazwischen | |
justify-around | justify-content: space-around | Platz rundherum | |
justify-evenly | justify-content: space-evenly | Gleichmäßiger Abstand | |
items-start | align-items: flex-start | Querachse Anfang | |
items-center | align-items: center | Querachse Mitte | |
items-end | align-items: flex-end | Querachse Ende | |
items-baseline | align-items: baseline | Querachse Grundlinie | |
items-stretch | align-items: stretch | Strecken zum Füllen | |
self-auto | align-self: auto | Selbst automatisch | |
self-start | align-self: flex-start | Selbst Anfang | |
self-center | align-self: center | Selbst Mitte | |
self-end | align-self: flex-end | Selbst Ende |
#Raster
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n Spalten | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n Zeilen | |
col-span-{n} | grid-column: span n | n Spalten übergreifend | |
col-start-{n} | grid-column-start: n | Bei Spalte n beginnen | |
col-end-{n} | grid-column-end: n | Bei Spalte n enden | |
row-span-{n} | grid-row: span n | n Zeilen übergreifend | |
row-start-{n} | grid-row-start: n | Bei Zeile n beginnen | |
row-end-{n} | grid-row-end: n | Bei Zeile n enden | |
auto-cols-auto | grid-auto-columns: auto | Automatische Spaltenbreite | |
auto-cols-fr | grid-auto-columns: 1fr | Automatische Spalte 1fr | |
auto-rows-auto | grid-auto-rows: auto | Automatische Zeilenhöhe |
#Position
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
static | position: static | Statische Position | |
relative | position: relative | Relative Position | |
absolute | position: absolute | Absolute Position | |
fixed | position: fixed | Fixierte Position | |
sticky | position: sticky | Klebende Position | |
top-{size} | top | Oberer Versatz | |
right-{size} | right | Rechter Versatz | |
bottom-{size} | bottom | Unterer Versatz | |
left-{size} | left | Linker Versatz | |
inset-{size} | top/right/bottom/left | Versatz in alle Richtungen | |
inset-x-{size} | left/right | Horizontaler Versatz | |
inset-y-{size} | top/bottom | Vertikaler Versatz | |
z-{n} | z-index | Z-Index | |
z-auto | z-index: auto | Automatischer Z-Index |
#Typografie
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
font-sans | font-family: sans-serif | Serifenlose Schrift | |
font-serif | font-family: serif | Serifenschrift | |
font-mono | font-family: monospace | Monospace-Schrift | |
text-xs | font-size: 0.75rem | Extra kleiner Text | |
text-sm | font-size: 0.875rem | Kleiner Text | |
text-base | font-size: 1rem | Basistext | |
text-lg | font-size: 1.125rem | Großer Text | |
text-xl | font-size: 1.25rem | Extra großer Text | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | Größere Textgrößen | |
font-thin | font-weight: 100 | Dünn | |
font-light | font-weight: 300 | Leicht | |
font-normal | font-weight: 400 | Normal | |
font-medium | font-weight: 500 | Mittel | |
font-semibold | font-weight: 600 | Halbfett | |
font-bold | font-weight: 700 | Fett | |
italic | font-style: italic | Kursiv | |
not-italic | font-style: normal | Nicht kursiv | |
leading-{size} | line-height | Zeilenhöhe | |
tracking-{size} | letter-spacing | Buchstabenabstand |
#Textausrichtung & Dekoration
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
text-left | text-align: left | Linksbündig | |
text-center | text-align: center | Zentriert | |
text-right | text-align: right | Rechtsbündig | |
text-justify | text-align: justify | Blocksatz | |
underline | text-decoration: underline | Unterstrichen | |
line-through | text-decoration: line-through | Durchgestrichen | |
no-underline | text-decoration: none | Keine Dekoration | |
uppercase | text-transform: uppercase | Großbuchstaben | |
lowercase | text-transform: lowercase | Kleinbuchstaben | |
capitalize | text-transform: capitalize | Großschreibung | |
truncate | overflow: hidden; text-overflow: ellipsis | Mit Auslassungspunkten abschneiden | |
line-clamp-{n} | -webkit-line-clamp: n | Auf n Zeilen begrenzen | |
whitespace-nowrap | white-space: nowrap | Kein Umbruch | |
break-words | word-wrap: break-word | Wörter umbrechen |
#Farben
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
text-{color}-{shade} | color | Textfarbe | |
bg-{color}-{shade} | background-color | Hintergrundfarbe | |
bg-gradient-to-{dir} | background-image: linear-gradient | Verlaufsrichtung | |
from-{color} | from color | Verlauf von | |
via-{color} | via color | Verlauf über | |
to-{color} | to color | Verlauf bis | |
text-transparent | color: transparent | Transparenter Text | |
bg-transparent | background-color: transparent | Transparenter Hintergrund | |
text-current | color: currentColor | Aktuelle Farbe erben |
#Rahmen
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
border | border-width: 1px | 1px Rahmen | |
border-{n} | border-width: npx | n Pixel Rahmen | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | Gerichteter Rahmen | |
border-{color} | border-color | Rahmenfarbe | |
border-solid | border-style: solid | Durchgezogene Linie | |
border-dashed | border-style: dashed | Gestrichelte Linie | |
border-dotted | border-style: dotted | Gepunktete Linie | |
border-none | border-style: none | Kein Rahmen | |
rounded | border-radius: 0.25rem | Leicht abgerundet | |
rounded-md | border-radius: 0.375rem | Mittel abgerundet | |
rounded-lg | border-radius: 0.5rem | Stark abgerundet | |
rounded-xl | border-radius: 0.75rem | Extra stark abgerundet | |
rounded-full | border-radius: 9999px | Vollständig rund | |
rounded-none | border-radius: 0 | Keine Abrundung | |
rounded-t/r/b/l-{size} | border-radius (corners) | Bestimmte Ecken |
#Effekte
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
shadow-sm | box-shadow: small | Kleiner Schatten | |
shadow | box-shadow: default | Standard-Schatten | |
shadow-md | box-shadow: medium | Mittlerer Schatten | |
shadow-lg | box-shadow: large | Großer Schatten | |
shadow-xl | box-shadow: extra large | Extra großer Schatten | |
shadow-2xl | box-shadow: 2x large | 2x großer Schatten | |
shadow-inner | box-shadow: inset | Innerer Schatten | |
shadow-none | box-shadow: none | Kein Schatten | |
opacity-{n} | opacity: n% | Deckkraft (0-100) | |
blur | filter: blur(8px) | Unschärfe | |
blur-{size} | filter: blur(size) | Unschärfemenge | |
brightness-{n} | filter: brightness(n%) | Helligkeit | |
contrast-{n} | filter: contrast(n%) | Kontrast | |
grayscale | filter: grayscale(100%) | Graustufen | |
invert | filter: invert(100%) | Invertieren |
#Übergänge & Animation
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
transition | transition-property: all | Standard-Übergang | |
transition-all | transition-property: all | Alle Übergänge | |
transition-colors | transition-property: colors | Farbübergang | |
transition-opacity | transition-property: opacity | Deckkraft-Übergang | |
transition-transform | transition-property: transform | Transform-Übergang | |
duration-{ms} | transition-duration: ms | Dauer | |
ease-linear | transition-timing: linear | Lineare Beschleunigung | |
ease-in | transition-timing: ease-in | Ease-in | |
ease-out | transition-timing: ease-out | Ease-out | |
ease-in-out | transition-timing: ease-in-out | Ease-in-out | |
delay-{ms} | transition-delay: ms | Verzögerung | |
animate-spin | animation: spin | Drehanimation | |
animate-ping | animation: ping | Ping-Animation | |
animate-pulse | animation: pulse | Puls-Animation | |
animate-bounce | animation: bounce | Hüpf-Animation |
#Transformationen
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
scale-{n} | transform: scale(n) | Skalierung | |
scale-x-{n} | transform: scaleX(n) | X-Skalierung | |
scale-y-{n} | transform: scaleY(n) | Y-Skalierung | |
rotate-{deg} | transform: rotate(deg) | Drehen | |
translate-x-{size} | transform: translateX | X-Verschiebung | |
translate-y-{size} | transform: translateY | Y-Verschiebung | |
skew-x-{deg} | transform: skewX(deg) | X-Neigung | |
skew-y-{deg} | transform: skewY(deg) | Y-Neigung | |
origin-center | transform-origin: center | Ursprung Mitte | |
origin-top | transform-origin: top | Ursprung oben | |
origin-bottom | transform-origin: bottom | Ursprung unten |
#Überlauf & Sonstiges
| Klasse | CSS | Beschreibung | |
|---|---|---|---|
overflow-auto | overflow: auto | Scrollen bei Bedarf | |
overflow-hidden | overflow: hidden | Überlauf verstecken | |
overflow-scroll | overflow: scroll | Immer scrollen | |
overflow-visible | overflow: visible | Überlauf anzeigen | |
overflow-x-{value} | overflow-x | Horizontaler Überlauf | |
overflow-y-{value} | overflow-y | Vertikaler Überlauf | |
cursor-pointer | cursor: pointer | Zeiger-Cursor | |
cursor-not-allowed | cursor: not-allowed | Nicht-erlaubt-Cursor | |
pointer-events-none | pointer-events: none | Zeigerereignisse deaktivieren | |
select-none | user-select: none | Auswahl verhindern | |
select-text | user-select: text | Textauswahl erlauben | |
select-all | user-select: all | Alles bei Klick auswählen | |
sr-only | screen reader only | Nur für Screenreader |
#Farbpalette
slate
gray
zinc
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
💡 Click a color block to copy the class name (e.g., blue-500)
Usage: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}
#Größenskalenreferenz
| Klasse | Wert | Klasse | Wert |
|---|---|---|---|
| 0 | 0px | px | 1px |
| 0.5 | 0.125rem (2px) | 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) | 3 | 0.75rem (12px) |
| 4 | 1rem (16px) | 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) | 8 | 2rem (32px) |
| 10 | 2.5rem (40px) | 12 | 3rem (48px) |
| 16 | 4rem (64px) | 20 | 5rem (80px) |
| 24 | 6rem (96px) | 32 | 8rem (128px) |
#Häufig gestellte Fragen (FAQ)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.