Certificado de Frontend con Tailwind CSS
6h 0m
Aprende a crear interfaces de usuario con Tailwind CSS el framework CSS más popular de frontend. Obtén tu certificado de superación de Tailwind CSS.
Accede GRATIS y certifícateIntroducció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:
- 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
- Importar la fuente desde Google Fonts en el HTML o CSS.
- 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) hasta900
(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) aopacity-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.
Tutoriales de programación en este certificado
Completa estas lecciones de programación para obtener tu certificado de superación
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Ejercicios de programación de Frontend con Tailwind CSS
Completa estos ejercicios de programación para obtener tu certificado de superación
Listado y formulario de productos en Tailwind CSS
Flexbox en Tailwind CSS
Contenedores y columnas en Tailwind CSS
Utilidades de espaciado y alineación en Tailwind CSS
Clases de tamaño de Tailwind CSS
Instalación de Tailwind CSS
Tipografía y fuentes en Tailwind CSS
Proyecto blog de artículos con Tailwind CSS
Clases de bordes de Tailwind CSS
Evaluación conocimiento Código Tailwind CSS
Transiciones y animaciones de Tailwind CSS
Evaluación conocimiento Test Tailwind CSS
Hover, focus y estado de Tailwind CSS
Fundamentos del sistema Utility-First
Grid en Tailwind CSS
Clases de colores y fondo de Tailwind CSS
Fundamentos del diseño responsive en Tailwind CSS
Introducción a Tailwind CSS
Otros cursos de programación con certificado
Supera todos los retos de Frontend con Tailwind CSS y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Control de versiones con Git
1h 40m
Programación con HTML
2h 30m
Programación con CSS
2h 30m
Programación con JavaScript
2h 30m
Programación con TypeScript
2h 30m
Programación con Java
5h 0m
Programación con Python
5h 0m
Programación con C Sharp
2h 30m
Bases de datos relacionales con SQL
2h 30m
Programación con NestJS en TypeScript
10h 0m
Programación con Angular en TypeScript
10h 0m
Programación con Spring Boot
10h 0m
Programación con Hibernate ORM en Java
10h 0m
Docker y Docker Compose
6h 0m
Frontend básico con HTML, CSS y JavaScript
5h 0m
Frontend avanzado: HTML, CSS, JS, TS, Angular
10h 0m
Backend con Java, Spring Boot, Hibernate
13h 20m
Backend con TypeScript y NestJS
13h 20m
Full Stack con Spring Boot y Angular
30h 0m
Full Stack con NestJS y Angular
20h 0m
Tecnologías que aprenderás
Al finalizar este curso obtendrás
Certificado de superación en Frontend con Tailwind CSS
Tras completar todas las lecciones y ejercicios del curso Frontend con Tailwind CSS se te genera un enlace con tu certificado para que lo puedas descargar o compartir directamente en cualquier plataforma, siempre accesible.