Certificado de Frontend con Tailwind CSS

Introducción a TailwindCSS

¿Qué es TailwindCSS?

TailwindCSS es un framework CSS que se basa en clases de utilidad para construir interfaces de usuario de manera eficiente. Proporciona una amplia gama de clases predefinidas que permiten diseñar sitios web sin escribir CSS personalizado.

Características principales de TailwindCSS

• Utility-First: enfoque centrado en clases de utilidad para estilos rápidos y consistentes.
• Personalización: configuración sencilla para adaptar estilos a las necesidades del proyecto.
• Responsive Design: facilita la creación de diseños adaptables a distintos dispositivos.
• PurgeCSS integrado: elimina CSS no utilizado para optimizar el rendimiento.
• Compatibilidad: funciona bien con herramientas modernas de desarrollo web.

Definición breve de cada componente que tiene TailwindCSS

• Tipografía: clases para fuentes, tamaños y estilos de texto.
• Colores: paleta de colores predefinida y personalizable.
• Espaciado: utilidades para márgenes y rellenos.
• Layout: herramientas para flexbox, grid y posicionamiento.
• Efectos: sombras, opacidades y transiciones.
• Estados: clases para hover, focus y otros estados interactivos.

Diferencias entre usar TailwindCSS y no usar ninguna librería CSS

Usar TailwindCSS acelera el desarrollo al ofrecer clases predefinidas, reduciendo la necesidad de escribir CSS desde cero. Sin una librería, es necesario crear y mantener estilos personalizados, lo que puede aumentar el tiempo y la complejidad del proyecto.

Instalación de TailwindCSS

Estructura de archivos en TailwindCSS

La estructura básica incluye:

• **tailwind.config.js**: archivo de configuración para personalizar el framework.
• **src/styles.css**: archivo donde se importan las directivas de TailwindCSS.
• Carpeta de componentes: organización opcional para componentes reutilizables.

Instalación mediante CDN

Para proyectos pequeños o pruebas rápidas, se puede utilizar el CDN:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet">

Instalación mediante NPM

Recomendado para proyectos profesionales:

1. Instalación:

   npm install tailwindcss
   npx tailwindcss init

Configuración: en tailwind.config.js, ajustar las opciones según las necesidades.

Importación: en src/styles.css:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Instalación mediante descarga directa

Se puede descargar el archivo CSS compilado y enlazarlo en el proyecto, aunque limita la capacidad de personalización y actualización.

Fundamentos

Fundamentos del sistema de Utility-First CSS

¿En qué consiste el enfoque Utility-First CSS?

El enfoque Utility-First CSS se basa en utilizar clases pequeñas y reutilizables para construir estilos directamente en el HTML. Esto permite un desarrollo más rápido y evita la creación de CSS personalizado innecesario.

Principios del diseño Utility-First

• Reutilización: uso de clases comunes en múltiples elementos.
• Consistencia: estilos uniformes en todo el proyecto.
• Escalabilidad: facilidad para mantener y ampliar el código.

Qué es un sistema de diseño y qué relación tiene con Utility-First

Un sistema de diseño es un conjunto de componentes y estilos coherentes que facilitan el desarrollo de interfaces. El enfoque Utility-First encaja bien al proporcionar las herramientas necesarias para implementar estos sistemas de manera eficiente.

Aspectos Utility-First de TailwindCSS

TailwindCSS ofrece una amplia variedad de clases de utilidad que abarcan tipografía, colores, espaciado, layout y más, alineándose con los principios del enfoque Utility-First.

Fundamentos del diseño responsive en TailwindCSS

¿Qué es y para qué sirve el diseño responsive?

El diseño responsive permite que las interfaces se adapten a diferentes tamaños de pantalla, mejorando la experiencia del usuario en dispositivos móviles, tabletas y ordenadores.

Breakpoints en TailwindCSS

TailwindCSS define breakpoints preestablecidos como sm, md, lg, xl y 2xl. Estos se utilizan para aplicar estilos específicos en función del ancho de la pantalla.

Aplicar clases específicas a breakpoints y rangos de breakpoints

Se antepone el prefijo del breakpoint a la clase deseada:

<div class="text-base md:text-lg lg:text-xl">
  Texto adaptable
</div>

Clases de utilidad

Tipografía y fuentes en TailwindCSS

Fuentes predeterminadas en TailwindCSS

• **font-sans**: aplica una fuente sans-serif.
• **font-serif**: utiliza una fuente serif.
• **font-mono**: selecciona una fuente monoespaciada.

Clases CSS básicas de texto y de encabezados en TailwindCSS

• Tamaños de texto: text-xs, text-sm, text-base, text-lg, etc.
• Peso de fuente: font-thin, font-light, font-normal, font-bold, etc.
• Estilo de texto: italic, not-italic.

Clases CSS de cuerpo de texto y transformación de texto

• Alineación: text-left, text-center, text-right, text-justify.
• Transformación: uppercase, lowercase, capitalize.
• Espaciado entre letras: tracking-tight, tracking-normal, tracking-wide.

Integración de Google Fonts con TailwindCSS y fuentes personalizadas

1. Importar la fuente desde Google Fonts en el HTML o CSS.
2. Agregar la fuente al archivo tailwind.config.js:

   module.exports = {
     theme: {
       extend: {
         fontFamily: {
           sans: ['Open Sans', 'sans-serif'],
         },
       },
     },
   }

Clases de tamaño

Clases Width, min width, max width

• Ancho: w-1/2, w-full, w-screen.
• Ancho mínimo: min-w-0, min-w-full.
• Ancho máximo: max-w-xs, max-w-md, max-w-full.

Clases Height, min height, max height

• Alto: h-8, h-16, h-full, h-screen.
• Alto mínimo: min-h-0, min-h-full.
• Alto máximo: max-h-8, max-h-screen.

Clase Size

No existe una clase size específica, pero se combinan width y height para ajustar el tamaño:

<div class="w-32 h-32">
  Elemento cuadrado
</div>

Utilidades de espaciado y alineación

Clases de margen

• Margen general: m-0, m-4, m-auto.
• Margen específico: mt-4 (arriba), mr-4 (derecha), mb-4 (abajo), ml-4 (izquierda).
• Margen eje X e Y: mx-4 (izquierda y derecha), my-4 (arriba y abajo).

Clases de padding

• Padding general: p-0, p-4.
• Padding específico: pt-4, pr-4, pb-4, pl-4.
• Padding eje X e Y: px-4, py-4.

Clases de Space Between

Para espaciar elementos dentro de un contenedor flex:

<div class="flex space-x-4">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

Clases de alineación

• Alineación horizontal: justify-start, justify-center, justify-end.
• Alineación vertical: items-start, items-center, items-end.

Clases de colores y fondo

Clases de color de texto

• Colores básicos: text-black, text-white, text-red-500, text-blue-500.
• Tonos: los números indican la intensidad del color, desde 100 (claro) hasta 900 (oscuro).

Clases de color de fondo

• Fondo sólido: bg-red-500, bg-green-500, bg-blue-500.
• Fondo transparente: bg-transparent.

Clases de transparencia

• Opacidad: opacity-0 (invisible) a opacity-100 (opaco).

Clases de bordes

Bordes: border radius, border width, border color, border style

• Radio de borde: rounded, rounded-md, rounded-full.
• Ancho de borde: border, border-2, border-4.
• Color de borde: border-black, border-red-500.
• Estilo de borde: por defecto es sólido; para otros estilos se necesita configuración adicional.

Separadores: divide Width, Divide color, divide style

Para añadir divisores entre elementos hijos:

<div class="divide-y divide-gray-200">
  <!-- Elementos hijos -->
</div>

Outline: outline width, outline color, outline style, outline offset

• Ancho de outline: outline, outline-2.
• Color de outline: outline-black, outline-white.
• Desplazamiento: outline-offset-2.

Sombras: Box Shadow, Box shadow color, Opacity

• Sombras: shadow-sm, shadow, shadow-lg.
• Color de sombra: requiere configuración en tailwind.config.js.
• Opacidad de sombra: ajustable mediante clases de opacidad.

Hover, focus y estado en TailwindCSS

Hover, focus, active

Se utilizan prefijos para aplicar estilos en estados específicos:

<button class="bg-blue-500 hover:bg-blue-700 focus:bg-blue-800 active:bg-blue-900">
  Botón interactivo
</button>

First, last, odd, even

Para seleccionar elementos según su posición:

• Primer elemento: first:.
• Último elemento: last:.
• Elementos impares: odd:.
• Elementos pares: even:.

Estados de formulario

• Deshabilitado: disabled:.
• Seleccionado: checked:.
• Enfoque dentro: focus-within:.

Transiciones y animaciones

La propiedad transición

Controla cómo cambian las propiedades CSS a lo largo del tiempo.

Clase Transition duration

Define la duración de la transición:

• Duraciones predefinidas: duration-75, duration-150, duration-300.

Clase Transition timing function

Controla la aceleración de la transición:

• Funciones predefinidas: ease-linear, ease-in, ease-out, ease-in-out.

Clase Transition delay

Retrasa el inicio de la transición:

• Delays predefinidos: delay-75, delay-150, delay-300.

Clase Animation

TailwindCSS admite animaciones personalizadas mediante la extensión en tailwind.config.js.

Layout

Contenedores y columnas en TailwindCSS

Introducción a Layout en TailwindCSS

TailwindCSS ofrece utilidades para crear layouts flexibles y responsivos sin escribir CSS personalizado.

Container

La clase container centra el contenido y ajusta el ancho máximo según el breakpoint:

<div class="container mx-auto">
  Contenido centrado
</div>

Columnas

Para crear columnas de texto:

<div class="columns-3">
  <p>Columna 1</p>
  <p>Columna 2</p>
  <p>Columna 3</p>
</div>

Flexbox en TailwindCSS

Contenedor Flex y su configuración en TailwindCSS

• Contenedor flex: flex.
• Dirección: flex-row (horizontal), flex-col (vertical).
• Envolvimiento: flex-wrap, flex-nowrap.

Flex direction: Dirección de elementos Flex

Controla la dirección de los elementos flexibles:

• Horizontal: flex-row.
• Vertical: flex-col.

Flex wrap: Envolver elementos

Permite que los elementos se ajusten en varias líneas:

• Envolver: flex-wrap.
• No envolver: flex-nowrap.

Flex basis: Tamaño de los elementos

Define el tamaño inicial de un elemento:

• Base flexible: basis-1/4, basis-1/2, basis-full.

Flex grow: crecimiento de elementos y relleno de espacio

Controla cómo los elementos crecen para llenar el espacio disponible:

• No crecer: grow-0.
• Crecer: grow.

Flex shrink: crecer y encoger elementos evitando desbordamiento

Controla cómo los elementos se encogen cuando el espacio es limitado:

• No encoger: shrink-0.
• Encoger: shrink.

Order: control del orden de los elementos flexibles

Ajusta el orden de visualización:

<div class="order-1">Primero</div>
<div class="order-2">Segundo</div>

Gap, justify, align y place para alineado de elementos flexibles

• Espaciado entre elementos: gap-4.
• Justificación horizontal: justify-start, justify-center, justify-end.
• Alineación vertical: items-start, items-center, items-end.
• Ubicación: place-content-center combina justificación y alineación.

Grid en TailwindCSS

Clases de contenedor grid

• Contenedor grid: grid.
• Columnas: grid-cols-1, grid-cols-2, grid-cols-3, etc.
• Filas: grid-rows-1, grid-rows-2, grid-rows-3, etc.

Grid template columns

Define el número y tamaño de las columnas:

<div class="grid grid-cols-3">
  <!-- Elementos -->
</div>

Grid column start y end

Controla dónde empieza y termina un elemento:

<div class="col-start-1 col-end-3">
  Elemento que abarca dos columnas
</div>

Grid template rows

Similar a las columnas, pero para filas:

<div class="grid grid-rows-2">
  <!-- Elementos -->
</div>

Grid row start y end

Controla la posición vertical de un elemento:

<div class="row-start-1 row-end-3">
  Elemento que abarca dos filas
</div>

Grid auto flow

Controla cómo se colocan los elementos automáticamente:

• Por filas: grid-flow-row.
• Por columnas: grid-flow-col.

Grid auto columns y auto rows

Define el tamaño de columnas y filas automáticas:

• Columnas automáticas: auto-cols-auto, auto-cols-min, auto-cols-max.
• Filas automáticas: auto-rows-auto, auto-rows-min, auto-rows-max.

Gap en Grid

Espaciado entre filas y columnas:

• Espaciado general: gap-4.
• Espaciado específico: gap-x-4 (horizontal), gap-y-4 (vertical).

Evaluación

Evaluación multirespuesta

Se propone una evaluación de 30 preguntas para medir el conocimiento general de TailwindCSS. Se recomienda un tiempo límite de 40 minutos.

Evaluación código

Una evaluación práctica para aplicar los conocimientos adquiridos en TailwindCSS, con un tiempo límite de 20 minutos.