Desarrollo Frontend · FRO-150

Tailwind CSS y utilidades

Clases utilitarias con configuración propia, componentes extraídos y un HTML que sigue siendo legible.

Bajo demanda Intermedio 7 módulos · 34 clases

Formato asíncrono Desarrollo Tailwind CSS, CSS

DESARROLLO

Lo que aprenderás

Aplicar el sistema de escalas de espaciado, tipografía y color de Tailwind con criterio
Componer diseños con Flexbox y CSS Grid mediante utilidades y variantes responsivas
Configurar tema propio, colores de marca y fuentes en el fichero de configuración
Usar variantes de estado, grupo y par para hover, foco y estados accesibles
Extraer patrones repetidos a componentes en lugar de acumular listas de clases
Implementar modo oscuro coherente con variables CSS y la variante dark
Depurar el CSS generado y reducir el resultado final revisando el escaneo de plantillas

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Presentación y entorno 4 clases

Qué propone el enfoque de utilidades y qué critica
Instalación y proceso de construcción del CSS
Escaneo de plantillas y clases que no deben construirse dinámicamente
Herramientas del navegador y del editor

Módulo 2 · Fundamentos de las utilidades 5 clases

Escala de espaciado, márgenes y relleno
Tipografía: tamaños, pesos e interlineado
Color, opacidad y fondos
Bordes, sombras y radios
Ejercicio: maquetar una tarjeta desde cero

Módulo 3 · Disposición y respuesta 5 clases

Flexbox con utilidades
CSS Grid: columnas, filas y áreas
Puntos de ruptura y diseño móvil primero
Contenedores, anchos máximos y centrado
Ejercicio: rejilla de contenidos adaptable

Módulo 4 · Estados y accesibilidad 5 clases

Variantes hover, focus y focus-visible
Variantes de grupo y de par
Estados deshabilitado, seleccionado e inválido
Contraste, tamaño de objetivo táctil y foco visible
Ejercicio: formulario accesible completo

Módulo 5 · Personalización del tema 5 clases

Configuración del tema y colores de marca
Fuentes propias y escalas personalizadas
Extender frente a sobrescribir la configuración por defecto
Plugins oficiales y utilidades propias
Modo oscuro con variables CSS

Módulo 6 · Mantener el HTML legible 5 clases

Señales de que una repetición pide un componente
Extraer componentes en React, Vue o plantillas de servidor
Composición de clases y utilidades condicionales
Convenios de orden de clases y formato automático
Revisar el CSS generado y su tamaño

Módulo 7 · Proyecto de cierre 5 clases

Rediseño de una interfaz de gestión existente
Componentes base: botón, campo, tabla y aviso
Modo oscuro y comportamiento responsivo completo
Revisión de accesibilidad con herramientas del navegador
Documentación de las decisiones de estilo

Requisitos

CSS con soltura: cascada, especificidad, Flexbox y Grid
HTML semántico y manejo de algún marco de componentes o de un generador de plantillas
Node.js instalado en local para el proceso de construcción

Descripción

El CSS de un proyecto que lleva un par de años suele ser un archivo que nadie borra por miedo: nombres de clase heredados, reglas que se pisan y estilos que solo se pueden anular a base de importantes. Tailwind cambia el enfoque poniendo las decisiones de estilo junto al marcado, pero mal usado produce un HTML ilegible lleno de cadenas interminables de clases.

El curso enseña las utilidades y, en paralelo, el criterio para no acabar así: cuándo una repetición pide extraerse a componente, cómo configurar el tema para que la marca esté en un solo sitio, y cómo mantener la accesibilidad de los estados. Se rediseña una interfaz existente completa, con modo oscuro, comportamiento responsivo y componentes reutilizables.

Al terminar se puede montar una interfaz coherente con rapidez y mantener el resultado a lo largo del tiempo. Es la base natural para el curso de sistemas de diseño, donde esa configuración de tema se convierte en tokens y en una biblioteca de componentes compartida entre varios proyectos.

¿Para quién es este curso?

Desarrolladores frontend que mantienen hojas de estilo heredadas difíciles de modificar
Perfiles de producto que maquetan sus propias interfaces y necesitan resultados coherentes
Equipos pequeños sin diseñador dedicado que quieren una base visual consistente