Des bordures CSS à Tailwind
border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
En Tailwind, une bordure se décompose : border pose l’épaisseur, un utilitaire distinct fixe la couleur. Le rayon suit une correspondance simple, border-radius: 0.5rem donnant rounded-lg. Le point sensible reste le focus, car les anneaux de Tailwind remplacent les contours par défaut et un indicateur perdu pénalise directement l’accessibilité.
Largeur, style et couleur
border: 1px solid #e5e7eb est souvent border border-gray-200. Séparez les côtés si le CSS n’est pas uniforme.
Rayons
0.5rem → rounded-lg. Rayons de marque rares → rounded-[…].
Outline de focus
Après conversion, revoyez focus-visible : beaucoup de régressions a11y vivent sur le bord de focus.
Essayer
.example { display: flex; gap: 1rem; padding: 1rem; }Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.