CSS Rahmen zu Tailwind – border, Farbe und rounded-lg

border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.

Rahmen zerfallen in Tailwind in zwei Teile: border setzt die Stärke, eine eigene Utility bestimmt die Farbe. Der Radius ist unkompliziert, border-radius: 0.5rem entspricht rounded-lg. Heikel wird es beim Fokus, denn Tailwind arbeitet mit eigenen Ringen. Geht dieser Indikator verloren, leidet die Bedienbarkeit für Tastaturnutzer sofort.

Breite, Stil und Farbe

border: 1px solid #e5e7eb ist oft border border-gray-200. Seiten trennen, wenn CSS uneinheitlich ist.

Radien

0.5rem → rounded-lg. Seltene Marken-Radien → rounded-[…].

Focus-Outline

Nach Konvertierung focus-visible prüfen: viele a11y-Regressionen sitzen am Focus-Rand.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.