Listando 100 clases comunes de Bootstrap 5 con sus equivalencias en Tailwind v4
# Comparativa de Clases Bootstrap 5 vs Tailwind CSS 4
Aquí tienes una lista de 100 clases comunes de Bootstrap 5 junto con sus equivalencias en Tailwind CSS v4. Esto te servirá para asimilar mejor cómo funciona Tailwind sin necesidad de replicar clases personalizadas.
## Layout y Espaciado
| Bootstrap 5 | Tailwind 4 | Descripción |
|-------------------|-------------------------------|-----------------------------------------------------|
| .container | container mx-auto | Contenedor centrado |
| .row | flex flex-wrap | Fila flexible con envoltura |
| .col | flex-1 | Columna que crece |
| .col-6 | w-1/2 | 50% de ancho |
| .col-12 | w-full | 100% de ancho |
| .m-0 | m-0 | Margen 0 |
| .mt-3 | mt-3 | Margen arriba (escala 1→4→...→96) |
| .mb-5 | mb-5 | Margen abajo |
| .p-2 | p-2 | Padding |
| .px-4 | px-4 | Padding horizontal |
| .py-1 | py-1 | Padding vertical |
| .g-3 | gap-3 | Espaciado entre elementos en grid o flex |
## Flex y Grid
| .d-flex | flex | Flex container |
| .d-inline-flex | inline-flex | Flex inline |
| .justify-content-center | justify-center | Alinear horizontalmente al centro |
| .justify-content-between | justify-between | Espacio entre elementos |
| .align-items-center | items-center | Centrar verticalmente |
| .flex-column | flex-col | Dirección vertical |
| .flex-row | flex-row | Dirección horizontal (por defecto) |
## Texto y Alineación
| .text-center | text-center | Centrado |
| .text-start | text-left | Alineado a la izquierda |
| .text-end | text-right | Alineado a la derecha |
| .text-uppercase | uppercase | Texto en mayúsculas |
| .fw-bold | font-bold | Fuente negrita |
| .fw-light | font-light | Fuente ligera |
| .text-muted | text-gray-500 | Texto atenuado (personalizable) |
| .lh-1 | leading-none | Altura de línea |
| .lh-base | leading-normal | Altura de línea normal |
## Colores y Fondo
| .bg-primary | bg-blue-600 | Fondo primario (ajustable) |
| .bg-secondary | bg-gray-600 | Fondo secundario |
| .bg-success | bg-green-500 | Fondo verde éxito |
| .bg-danger | bg-red-600 | Fondo de error |
| .text-white | text-white | Texto blanco |
| .text-dark | text-gray-900 | Texto oscuro |
## Tamaños
| .w-100 | w-full | Ancho completo |
| .w-50 | w-1/2 | Ancho 50% |
| .h-100 | h-full | Alto completo |
| .h-auto | h-auto | Alto automático |
| .min-vh-100 | min-h-screen | Altura mínima 100vh |
## Bordes y Radios
| .border | border | Borde simple |
| .border-0 | border-0 | Sin borde |
| .rounded | rounded | Borde redondeado |
| .rounded-circle | rounded-full | Borde completamente circular |
| .rounded-3 | rounded-lg | Borde medio |
## Botones
| .btn | inline-block px-4 py-2 rounded text-white bg-blue-600 | Estilo básico de botón |
| .btn-primary | bg-blue-600 hover:bg-blue-700 | Botón primario con hover |
| .btn-danger | bg-red-600 hover:bg-red-700 | Botón de peligro |
| .btn-outline-primary | border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-100 | Botón con borde |
## Cards y Sombras
| .card | bg-white rounded shadow p-4 | Tarjeta básica |
| .card-body | p-4 | Contenido de tarjeta |
## Utilidades Varias
| .d-none | hidden | Oculto |
| .d-block | block | Elemento en bloque |
| .position-relative| relative | Posición relativa |
| .position-absolute| absolute | Posición absoluta |
| .overflow-auto | overflow-auto | Scroll automático |
| .shadow | shadow | Sombra estándar |
| .shadow-lg | shadow-lg | Sombra grande |
## Responsive
| .d-md-none | md:hidden | Oculto en medium y arriba |
| .d-sm-block | sm:block | Visible desde small |
| .text-lg-start | lg:text-left | Alineado izquierda en large |
| .col-md-6 | md:w-1/2 | 50% en medium |
## Componentes equivalentes
- **Navbar**: `flex justify-between items-center p-4 bg-white shadow`
- **Alertas**: `bg-red-100 text-red-800 p-4 rounded`
- **Badges**: `inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded-full`
- **Form-control**: `border px-3 py-2 rounded w-full`
Comentarios
Publicar un comentario