Semana 06 — Librerías CSS

1. ¿Qué es una librería CSS?

Una librería CSS es un conjunto de estilos, componentes y utilidades predefinidas que podemos usar directamente en nuestro HTML, sin necesidad de escribir esos estilos desde cero.

Funcionan agregando clases específicas a los elementos HTML. La librería provee el CSS correspondiente a esas clases.

<!-- Sin librería: hay que escribir el CSS manualmente -->
<button style="background:#0d6efd;color:#fff;padding:8px 16px;
        border:none;border-radius:4px;cursor:pointer">
  Guardar
</button>

<!-- Con Bootstrap: una sola clase hace todo eso -->
<button class="btn btn-primary">Guardar</button>

<!-- Con Tailwind: clases utilitarias atómicas -->
<button class="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
  Guardar
</button>

¿Por qué usarlas?

Velocidad: componentes listos que tardarían horas en construirse desde cero
Consistencia: mismos estilos en todos los navegadores y dispositivos
Responsividad: sistemas de grilla y breakpoints ya implementados
Comunidad: documentación extensa, ejemplos y soporte activo

Cuándo NO usarlas: si el proyecto requiere una identidad visual muy específica y personalizada, las librerías pueden ser una restricción. En esos casos es mejor CSS propio desde cero. Conocer librerías no sustituye entender CSS — es un complemento.

Las dos grandes librerías

B

Bootstrap 5

Componentes UI listos para usar

📦 Componentes completos (navbar, modal, cards…)
🏗️ Grilla de 12 columnas
⚡ Listo en minutos, sin configuración
📱 Responsivo por defecto
🎨 Apariencia consistente y reconocible

TW

Tailwind CSS

Clases utilitarias atómicas

🧱 Sin componentes — solo utilidades
🎛️ Altamente configurable
🎨 Diseño completamente personalizable
📏 Diseño directamente en el HTML
🚀 Curva de aprendizaje moderada

2. Bootstrap 5

Bootstrap es la librería CSS más usada del mundo. Fue creada por Twitter en 2011 y hoy está en su versión 5. Su filosofía es "component-first": provee componentes completos y funcionales listos para insertar en tu HTML.

Incluir Bootstrap via CDN

<!-- CSS de Bootstrap — va en el <head> -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet">

<!-- JS de Bootstrap — va al final del <body> (necesario para modales, etc.) -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

El sistema de Grilla (Grid)

Bootstrap divide cada fila en 12 columnas. Combinando clases col-* puedes definir cuántas columnas ocupa cada elemento en cada tamaño de pantalla.

<!-- Siempre: container → row → col -->
<div class="container">
  <div class="row">

    <!-- 6 de 12 columnas = 50% -->
    <div class="col-6">Mitad izquierda</div>
    <div class="col-6">Mitad derecha</div>

  </div>

  <div class="row">
    <!-- Responsive: 12 en móvil, 6 en tablet, 4 en desktop -->
    <div class="col-12 col-md-6 col-lg-4">Tarjeta 1</div>
    <div class="col-12 col-md-6 col-lg-4">Tarjeta 2</div>
    <div class="col-12 col-md-6 col-lg-4">Tarjeta 3</div>
  </div>
</div>

Breakpoints de Bootstrap

Sufijo	Nombre	Ancho mínimo	Ejemplo de clase
(ninguno)	xs — Extra small	0px	`col-6`
`sm`	Small	576px	`col-sm-6`
`md`	Medium	768px	`col-md-4`
`lg`	Large	992px	`col-lg-3`
`xl`	Extra large	1200px	`col-xl-2`
`xxl`	Extra extra large	1400px	`col-xxl-1`

Componentes principales

<!-- BOTONES -->
<button class="btn btn-primary">Principal</button>
<button class="btn btn-secondary">Secundario</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-sm btn-danger">Pequeño rojo</button>

<!-- CARD -->
<div class="card" style="width: 18rem">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p  class="card-text">Descripción.</p>
    <a  href="#" class="btn btn-primary">Ver más</a>
  </div>
</div>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Sitio</a>
  </div>
</nav>

<!-- CLASES DE UTILIDAD -->
<p class="text-center text-primary mt-4 mb-2 fw-bold fs-5">
  Centrado, azul, margen arriba, negrita
</p>
<div class="d-flex justify-content-between align-items-center gap-3 p-3">
  Layout flexbox con padding y gap
</div>

▶ Demo en vivo — Componentes Bootstrap 5 BOOTSTRAP

Convención de Bootstrap: las clases siguen el patrón propiedad-valor. Por ejemplo: text-center, mt-4 (margin-top nivel 4), d-flex (display flex), fw-bold (font-weight bold).

3. Tailwind CSS

Tailwind es un framework "utility-first": en lugar de componentes predefinidos, provee cientos de clases pequeñas y atómicas que describen exactamente una propiedad CSS. El diseño se construye directamente en el HTML, combinando estas utilidades.

Filosofía: con Tailwind no hay que inventar nombres de clases ni saltar entre archivos HTML y CSS. Todo el estilo vive en el markup. Al principio parece mucho texto en el HTML, pero el resultado es un control total del diseño sin acumulación de CSS sin usar.

Incluir Tailwind via CDN (Play CDN)

<!-- CDN para prototipos y aprendizaje -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Para producción, instalar con npm y compilar -->
> npm install tailwindcss
> npx tailwindcss init

Clases utilitarias fundamentales

<!-- Layout -->
flex        → display: flex
grid        → display: grid
block       → display: block
hidden      → display: none
container   → contenedor centrado con max-width
mx-auto     → margin-left y right auto (centrar)

<!-- Espaciado: escala de 0 a 96 (1 unidad = 4px) -->
p-4         → padding: 16px (en todos los lados)
px-6        → padding horizontal: 24px
py-2        → padding vertical: 8px
mt-8        → margin-top: 32px
mb-4        → margin-bottom: 16px
gap-3       → gap: 12px

<!-- Tamaños -->
w-full      → width: 100%
w-1/2       → width: 50%
w-64        → width: 256px
h-screen    → height: 100vh
max-w-lg    → max-width: 32rem

<!-- Tipografía -->
text-sm     → font-size: 14px
text-xl     → font-size: 20px
text-4xl    → font-size: 36px
font-bold   → font-weight: 700
font-light  → font-weight: 300
text-center → text-align: center
leading-relaxed → line-height: 1.625
tracking-wide   → letter-spacing: 0.025em

<!-- Colores (escala 100–900) -->
text-gray-600   → color gris
bg-blue-500     → background azul
border-red-300  → border color rojo claro

<!-- Bordes y sombras -->
rounded     → border-radius: 4px
rounded-lg  → border-radius: 8px
rounded-full→ border-radius: 9999px
border      → border-width: 1px
border-2    → border-width: 2px
shadow      → box-shadow suave
shadow-lg   → box-shadow pronunciada

<!-- Interactividad (hover, focus) -->
hover:bg-blue-600    → :hover { background }
focus:ring-2         → :focus { ring }
transition           → transition: all 150ms

<!-- Responsive: prefijos de breakpoint -->
md:flex     → flex solo en pantallas ≥ 768px
lg:text-xl  → text-xl solo en ≥ 1024px
sm:hidden   → hidden solo en ≥ 640px

▶ Demo en vivo — Componentes Tailwind CSS TAILWIND

4. Bootstrap vs Tailwind — Comparativa

Ambas librerías resuelven el mismo problema de formas muy distintas. No hay una "ganadora" — la elección depende del proyecto, el equipo y el contexto.

La misma tarjeta en ambas librerías

Bootstrap 5

<div class="card shadow-sm">
  <div class="card-body">
    <h5 class="card-title">
      Título
    </h5>
    <p class="card-text text-muted">
      Descripción del elemento.
    </p>
    <a href="#"
       class="btn btn-primary">
      Ver más
    </a>
  </div>
</div>

Tailwind CSS

<div class="bg-white rounded-xl
       p-5 shadow-sm border
       border-gray-200">
  <h5 class="font-semibold
          text-gray-800 mb-1">
    Título
  </h5>
  <p class="text-gray-500
        text-sm mb-3">
    Descripción del elemento.
  </p>
  <a href="#"
     class="bg-blue-600 text-white
            px-4 py-2 rounded-lg
            text-sm hover:bg-blue-700">
    Ver más
  </a>
</div>

Tabla de diferencias clave

Aspecto	Bootstrap 5	Tailwind CSS
Filosofía	Component-first	Utility-first
Componentes prediseñados	✅ Muchos (navbar, modal, tabs…)	❌ No — los construyes tú
Personalización	Limitada sin sobreescribir estilos	Total desde el principio
Aspecto visual	Reconocible (look Bootstrap)	Cualquier diseño es posible
CSS generado	~190KB (archivo completo)	Solo las clases usadas (~5–15KB)
Curva de aprendizaje	Baja — intuitive y documentado	Media — hay que memorizar utilidades
JavaScript incluido	✅ Sí (modales, dropdowns…)	❌ No — solo CSS
Ideal para…	Prototipos rápidos, dashboards, apps internas	Diseños personalizados, SPA, design systems
Compatibilidad con frameworks	Funciona con cualquiera	Excelente con React, Vue, Next.js

Regla práctica: elige Bootstrap cuando necesitas velocidad y los componentes por defecto son suficientes para el proyecto. Elige Tailwind cuando el diseño es personalizado y trabajas con un framework moderno como Vue o React.

En el mundo profesional es común que los equipos conozcan ambas y elijan según el tipo de proyecto.

5. Otras librerías CSS

El ecosistema es amplio. Más allá de Bootstrap y Tailwind, existen librerías especializadas para distintas necesidades.

Librería	Filosofía	Ideal para	Particularidad
Bulma	Component-based	Proyectos sencillos	Solo CSS, sin JavaScript
Foundation	Component-based	Proyectos empresariales	Muy flexible, más complejo
DaisyUI	Componentes sobre Tailwind	Proyectos con Tailwind	Agrega componentes semánticos a Tailwind
Materialize	Material Design	Apps con estética Google	Basado en Material Design de Google
Pico CSS	Classless	Prototipos sin clases	Estiliza el HTML semántico puro
Open Props	Variables CSS	Design tokens	Solo variables CSS, sin clases

DaisyUI + Tailwind es una combinación muy popular: Tailwind para las utilidades base + DaisyUI para componentes con clases semánticas como btn btn-primary o card, pero generadas sobre Tailwind. Lo mejor de ambos mundos.

6. Proyecto aplicado — Landing page con ambas librerías

La misma landing page construida dos veces: una con Bootstrap y otra con Tailwind. Observa las diferencias en el código y en el resultado visual.

Conceptos aplicados: grilla responsiva · navbar · hero section · cards · formulario de contacto · botones y badges · utilidades de espaciado, tipografía y color

BS

Landing Page — Curso Frontend

Misma página construida con Bootstrap y Tailwind CSS