1Qu2 es Tailwind CSS3

Apuntes

¿Qué es Tailwind CSS? Tailwind CSS es un framework CSS de utilidad que permite crear interfaces modernas y responsivas rápidamente sin tener que escribir CSS personalizado. Se basa en clases que puedes aplicar directamente en tu HTML para controlar estilos como márgenes, colores, tipografía, grid, flexbox, etc. 🎨 Fundamentos del Diseño con Tailwind CSS 📌 1. Sistema de Utilidades Tailwind se basa en clases utilitarias como: text-gray-700 → Color del texto bg-blue-500 → Fondo rounded-lg → Bordes redondeados p-4, m-2 → Padding y margin grid, flex, items-center, justify-between → Layout 🧩 Combina las clases como piezas de Lego para construir cualquier diseño. 🎯 2. Diseño Responsivo Tailwind usa breakpoints móviles primero: Alias Pantalla mínima sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px Ejemplo: html Copiar Editar <div class="text-sm md:text-lg lg:text-xl"> Texto que cambia de tamaño en pantallas grandes </div> 💠 3. Tipografía Moderna Clases útiles: text-xs, text-lg, text-2xl, text-4xl font-light, font-bold, font-extrabold leading-tight, tracking-wide text-justify, text-center 🖼️ 4. Colores y Paletas Tailwind tiene una paleta extendida de colores: h...