Abgerundete Ecken

Abgerundete Ecken entstehen mit der Eigenschaft border-radius, wie du aus dem CSS-Kurs weißt. In Tailwind sind das die rounded-*-Klassen:

Die Größennamen kennst du von den Schriftgrößen und den maximalen Breiten: von extra klein (xs) über mittel (md) bis extra groß (xl, 2xl, 3xl). Vorsicht bei älteren Beispielen im Internet, die für Tailwind 3 geschrieben wurden: Einige Namen haben sich seitdem verschoben. Dort war rounded-sm nur 2 Pixel groß, wie heute rounded-xs.

rounded-full ist etwas Besonderes: Der Radius ist so groß, dass die kürzeren Seiten des Elements zu Halbkreisen werden. Ein Button wird zur Pille, ein Quadrat, etwa ein Bild mit size-16, zum Kreis. Im CSS-Kurs hast du einen Kreis mit border-radius: 50% gemacht, aber bei einem Rechteck ergeben 50 % eine Ellipse, keine Pille:

rounded-full border-radius: 50%

Du kannst auch nur einige Ecken abrunden: rounded-t-2xl rundet die oberen beiden (t für top, wie bei Rahmen), rounded-l-lg die beiden linken und rounded-tl-lg nur die obere linke.