Bootstrap vs tailwind

1/06/2025

El uso de un framework de CSS para la maquetación web es una dinámica esencial que ahorra tiempo al desarrollo

cssweb

A la hora de crear una página web o aplicación el uso de un freamework de CSS para crear la maquetación y tener una base común al equipo de desarrollo se hace esencial. Dos de los frameworks más utilizados en la actualidad son Bootstrap y Tailwind CSS, veamos diferencias, similitudes y resumen de ambas opciones.

Bootstrap

Proporciona una serie de componentes predefinidos (botones, menús, cards, etc.) y que pueden ser utilizados fácilmente, lo que agiliza el proceso de desarrollo web.

Este framework combina una hoja de estilos o CSS junto con funcionalidad javascript para varios de los componentes, por ejemplo, carruseles, modales y menús. Además se complementa con una fuente de iconos que pueden ser utilizados en casi cualquier proyecto.

Bootstrap

Tailwind CSS

Este framework no utiliza javascript final, se centra solo en las hojas de estilo y en optimizar el peso de estas, por lo que si una clase no es utilizada en el proyecto no será cargada en las hojas de estilo.

Por así decirlo, es una abstracción de las hojas de estilo, creando clases simples y sencillas que evitan la creación de líneas CSS muy comunes.

Tailwind

Comparación rápida

Si hablamos sobre rendimiento Tailwind es la opción a escoger, sin duda. Es más, la gran mayoría de creadores de contenido sobre desarrollo web lo utilizan y está en auge. Lo que ocurre es que para desarrollos rápidos está genial, pero su uso es poco flexible salvo que tu aplicación se base en componente reutilizables y reactivos. Si deseas crear todo un portal web bootstrap sirve de forma global mucho mejor que Tailwind con una estética ya creada.

Me explico, para poner un botón estilado en BS pones dos clases “btn btn-primary”, si quieres cambiar la visualización vas al SCSS y configuras el BS estándar con las variables o fuerzas sobreescribiendo la clase btn o btn primary en CSS. Más ágil pero menos optimizado y si tocas variables del SCSS tienes que conocer el sitema, sin embargo, de base tienes un botón con color primary.

Con Tailwind la opción es definir el botón con los helpers (clases CSS) y su sintaxis “bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded”, un maravilloso compendio de clases. Vale, hay opciones para no hacer Ctrl C + Ctrl V cada vez que quieras el mismo botón para tener la misma visualización en toda la web: poner la clase “btn btn-primary” y definirlo en CSS sin sobreescribir nada, o si utilizas Astro o React crear un componente reutilizable que tenga el código o mezclar ambas opciones.

Si además, metemos en la comparativa comportamientos que requieren javascript como carruseles o modales, menús offcanvas, o componentes similares veremos que tailwind no incluye nada pero bootstrap si. Esto quiere decir, que necesitas crear estos comportamientos o componentes mediante código de cero o conocer librerías que cubran los requisitos.

Ejemplos prácticos

Veamos la maquetación de esta web con una columna izquierda con un < Sidebar > y a la derecha el contenido. En Bootstrap 5 utilizando componentes de Astro sería así:

<div class="conainer-fluid">
    <div class="row g-0 ">
        <div class="col-12 col-md-4 col-lg-3 vh-md-100 bg-primary">
            <Sidebar/>
        </div>
        <div class="col-12 col-md-8 col-lg-9">
            <main id="main" class={className}>
                <slot />
                {(frontmatter && frontmatter.name) &&
                    <p class="text-center py-3">
                        <a href="/blog" title="Listado de artículos"  class="btn btn-primary" >
                            Artículos
                        </a>
                    </p>
                }
            </main>
        </div>
    </div>
</div>

La equivalencia en Tailwind sería la siguiente:

<div class="w-full">
    <div class="flex flex-wrap">
        <div class="w-full md:w-4/12 lg:w-3/12 md:h-dvh bg-blue-500">
            <Sidebar/>
        </div>
        <div class="w-full md:w-8/12 lg:w-9/12">
            <main id="main" class={className}>
                <slot />
                {(frontmatter && frontmatter.name) &&
                    <p class="text-center py-3">
                        <a href="/blog" title="Listado de artículos" 
                        class="text-blue-600 hover:text-blue-800 bg-blue-500 hover:bg-blue-600 
                        text-white font-bold py-2 px-4 rounded">
                            Artículos
                        </a>
                    </p>
                }
            </main>
        </div>
    </div>
</div>

A simple vista podemos comprobar que la sintaxis es similar, pero vayamos al detalle:

• container-fluid (Bootstrap) vs. w-full (Tailwind CSS):
  container-fluid en Bootstrap hace que el contenedor ocupe el 100% del ancho del viewport.
  En Tailwind, w-full logra el mismo efecto.

• row g-0 (Bootstrap) vs. flex flex-wrap (Tailwind CSS):
  row en Bootstrap establece un contexto de flexbox para sus columnas y con g-0 elimina el “gutter” (margen entre columnas).
  En Tailwind, flex convierte el elemento en un contenedor flex y flex-wrap permite el wrap de los elementos hijos (columnas) si no caben.
  Tailwind no tiene una clase directa g-0, porque su enfoque es más granular con los espaciados, al no aplicar clases de gap-* o space-x-*, se logra el mismo efecto de “sin gutter” entre las columnas.

• col-12 col-md-4 col-lg-3 (Bootstrap) vs. w-full md:w-4/12 lg:w-3/12 (Tailwind CSS):
  Bootstrap utiliza un sistema de cuadrícula de 12 columnas por defecto.
  col-12: Ocupa 12 de 12 columnas en dispositivos extra pequeños (por defecto, para pantallas pequeñas y superiores).
  col-md-4: Ocupa 4 de 12 columnas en dispositivos tablets y superiores.
  col-lg-3: Ocupa 3 de 12 columnas en dispositivos grandes y superiores.
  Tailwind CSS también trabaja con un sistema de cuadrícula flexible (aunque no siempre explícitamente de 12 columnas en las clases de ancho).
  w-full: Ocupa el 100% del ancho (equivalente a col-12).
  md:w-4/12: A partir del breakpoint md (mediano), el ancho será de 4/12 (o 1/3) del contenedor padre.
  lg:w-3/12: A partir del breakpoint lg (grande), el ancho será de 3/12 (o 1/4) del contenedor padre.

• col-12 col-md-8 col-lg-9 (Bootstrap) vs. w-full md:w-8/12 lg:w-9/12 (Tailwind CSS):
  Sigue la misma lógica que el punto anterior, adaptando el ancho para la columna del contenido principal.

• vh-md-100 (Bootstrap) vs .md:h-dvh (Tailwind CSS):
  Definir una altura desde el breakpoint md y superior de la altura de la pantalla.

• bg-primary (Bootstrap) vs. bg-blue-500 (Tailwind CSS):
  Bootstrap utiliza clases semánticas como bg-primary que están predefinidas en su tema.
  Tailwind CSS utiliza clases utilitarias de bajo nivel para los colores.

• Clases del enlace (btn btn-primary)
  text-center py-3: Centra el texto y añade padding vertical.
  text-blue-600 hover:text-blue-800: Color del texto y cambio al hacer hover.
  bg-blue-500 hover:bg-blue-600: Color de fondo y cambio al hacer hover.
  text-white font-bold py-2 px-4 rounded: Estilo del texto, padding y bordes redondeados para simular un botón.

La clave para replicar el sistema de cuadrícula de Bootstrap en Tailwind es usar las utilidades de Flexbox combinadas con sus breakpoints responsivos.

Breakpoints de Bootstrap (por defecto):

• sm: ≥ 576px
• md: ≥ 768px
• lg: ≥ 992px
• xl: ≥ 1200px
• xxl: ≥ 1400px

Breakpoints de Tailwind (por defecto):

• sm: ≥ 640px
• md: ≥ 768px
• lg: ≥ 1024px
• xl: ≥ 1280px
• 2xl: ≥ 1536px

Si necesitas breakpoints diferentes a los predeterminados se puede personalizar el archivo tailwind.config.js junto con otras variables. En Bootstrap esta personalización se puede realizar en el archivo bootstrap.scss cambiando las variables de variables.scss antes de compilar.

Artículos