Taller TAILWIND

Tailwindcss sesión: 1
Edgar Vargas Zermeño

talos@unam.mx
1. ¿Por qué usar Tailwindcss? 3. Maquetación con Flexbox 5. Configuraciones de Tailwindcss
● La forma como trabajamos ● Documentación oficial ● Archivo tailwind.config.js
● CSS convencional ● Compilación de estilos ● Colores personalizados
● ATOMIC CSS ● Sistema de columnas ● Fuentes personalizadas
● Cómo funciona Tailwindcss ● Formularios
● Directiva @apply
2. Apariencia básica 4. Maquetación con Grid Layout

● Implementación con CDN ● Conceptos básicos
● Texto, colores y bordes ● Grid Layout en Tailwind
● Ancho y alto de elementos ● Plantilla de columnas
● Imágenes y gradientes ● Maquetación responsiva
ENTREGA FINAL
Se entregarán los archivos en las 5 carpetas del curso (una por sesión), cada carpeta consta
de subdirectorios “ejercicio” y “practica”.
Pasos:
1. Envío de correo gmail al instructor*
2. Asignación de carpeta Drive por parte del instructor
3. Notificación de acceso a carpeta personal
4. Subida de archivos (con límite al viernes 2 de diciembre 23:59 hrs)
*De no contar con un correo gmail se enviará correo con carpeta comprimida bajo el mismo plazo
SEPARATION OF CONCERNS (SoC)
El Modelo-VIsta-Controlador(MVC) que diferencía el desarrollo en backend

y frontend, trae el concepto de separación de intereses (SoC), principio de
diseño que enfoca el trabajo en intereses respecto del código para la
construcción y mantenimiento de una interfaz de usuario.
SEPARATION OF CONCERNS (SoC)
Separar trae muchos beneficios pero no podemos negar que llega a ser tedioso
"brincar" del HTML a las reglas escritas en CSS para sincronizar la apariencia.
Esto se vuelve más complicado cuando varios desarrolladores necesitan

actualizar, modificar o depurar una aplicación de forma simultánea.
Próximos pasos
Situaciones
Tarea 1 comunes al
retomar
Escribe untexto
aquí tu desarrollo
Escribe aquí con
tu textoCSS:
Escribe aquí tu texto Escribe aquí tu texto Escribe
aquí tu texto Escribe aquí tu texto
● Reglas de estilo sin nombre intuitivo.
Tarea
● Se 2 agregan reglas sin revisar las que existen.
● Sobreescritura
Escribe aquí tu textode estilos.
● Reglas sin sentido en nuestro proyecto.
Tarea
● Un 3 cambio puede implicar el recorrido de
decenas
Escribe aquí tudetexto
líneas de CSS.
Esto sucede si la persona que escribió las reglas de

estilo no está o estando no recuerda porque las
puso.
¿Agrego más estilos?
Para un desarrollo en constante

evolución significa que se han de
escribir muchas reglas adicionales.
Sobre todo en equipos de

desarrollo donde cada colaborador
resuelve como mejor le parece.
Los archivos CSS
podrían convertirse
en un desastre. Los
desarrolladores no
se sienten cómodos
al eliminar reglas de
estilo porque no
están seguros de
qué componentes se
verán afectados en el
proyecto.
Atomic CSS
Atomic CSS es un término acuñado en 2013 por Thierry

Koblentz, aparece en su artículo de Smashing Magazine
titulado Challenging CSS Best Practices.
Koblentz habla de lo doloroso e intrincado que se torna

manejar CSS tradicional y presenta una nueva forma de
implementar diseño junto con el lenguaje de marcas, le da
el adjetivo de game-changer.
Utility-first
Tradicionalmente cada regla CSS representa un elemento

de la interfaz de usuario, describe su apariencia.
Los frameworks bajo el principio Utility-first le dan la vuelta

a esta idea al proporcionarnos una “caja de herramientas”
con clases de utilidad, clases de un solo propósito que
podemos usar para aplicarlas a los elementos HTML y
diseñar componentes.
Utility-first
CSS convencional
Donde p-10 podría representar a padding: 10px;

Utility-first
Al aplicar estilos predefinidos a los

elementos se simplifica el proceso
Donde p-10 podría representar a padding: 10px;
de dar apariencia, tenemos un
código más claro y se proporcionan
muchas opciones de diseño
adicionales que contribuyen a crear
contenido personalizado.
Las clases de utilidad pueden

parecer extrañas al principio, pero
después de usarlas se aprecian sus
beneficios.
Utility-first - Frameworks
La idea de un enfoque basado en la

utilidad para la denominación de clases
ya lleva un tiempo existiendo, pero
tomó impulso hasta el lanzamiento de
Tailwindcss.
Tailwindcss
Tailwindcss ganó
mucho terreno en
dos años
(2019 - 2021)
según la encuesta
anual
State of CSS 2021
https://2021.stateofcss.com/es-ES/technologies/css-frameworks/
Tailwindcss
Tailwindcss se basa en Utility-first y es un

proyecto CSS iniciado por Adam Wathan. El primer
alfa se realizó en 2017 y la primera versión estable
fue liberada en 2019.
Su nombre se eligió pensando en el factor que te

hace ir más rápido, en alusión a la frase naval
"viento en popa" que coloquialmente usamos como
“viento a favor”.
Tailwindcss - Características
Tailwindcss establece un conjunto de directivas que

permiten la creación de un vínculo estrecho entre el
estilo y el contenido. Algunas de sus características:
● Código predecible, mantenible y escalable.

● Reduce la abstracción.
● Evita la redundancia de reglas.
● Detiene el crecimiento sin control de CSS.
● Omite las reglas sin usar.
● Mejora de almacenamiento en caché
● Se favorece la compresión gzip.
Tailwindcss - Instalación
Se puede instalar en 3 contextos:
● CLI
● Framework de desarrollo
● CDN (no compilado)
Tailwindcss rastrea los archivos y directorios que

indiquemos, busca los nombres de clase utilizados y
genera los estilos correspondientes en un archivo
CSS estático.
Práctica 1: Mi galería
Genera una galería con diversas imágenes,
deben tener el aspecto visual llamado polaroid.
Nuestro ejemplo utiliza fotos del portal

dzoom.org.es. Si es tu deseo puedes usarlas
para el ejercicio, son 14 y basta que cambies el
número en el nombre de la imagen.
https://www.dzoom.org.es/wp-content/uploads/2011/
08/insp-cuadradas-1.jpg
Pasos:
1. La práctica debe quedar como se ilustra.

2. Genera la estructura HTML
3. Coloca solo una imagen y ensaya las clases en la
imagen antes de replicar.
4. Guarda tu práctica con tu nombre en el title.
talos@unam.mx

Instalación de Node
Directivas de Tailwindcss
Práctica 2: Estructura HTML responsiva
Ahora crea la estructura de una página web
responsiva con Tailwindcss, compila utilizando
los archivos de configuración.
Pasos sugeridos:
1. Analiza la imagen de ejemplo, la práctica debe quedar
como se ilustra.
2. Configura tu proyecto para utilizar la compilación de
Tailwindcss.
3. Genera la estructura base HTML con etiquetas
semánticas.
4. Asigna las clases Tailwindcss correspondientes a cada
sección.
5. Genera una columna para el banner, tres y cinco
columnas respectivamente para el resto del contenido.
Ponles el color que desees.
6. Una vez terminado guarda tu proyecto para entregarlo
el viernes.
talos@unam.mx

Grid Layout Module CSS
Para utilizar este módulo en

Tailwindcss basta con indicar
en el contenedor la clase grid,
el número de columnas con
grid-cols y a continuación el
número deseado:
grid-cols-3
Si fueran filas sería grid-rows-3.

Para espaciar usamos gap-3.
Para que un elemento abarque

varios tracks agregamos
col-span, si fuese una columna
con una área de 2 celdas
horizontales escribimos en el
elemento deseado:
col-span-2
El elemento 4 del ejemplo

muestra además row-span-2
para abarcar dos filas.
Práctica 3: Estructura Grid Layout
Crea una estructura con Grid.
Pasos sugeridos:
1. Analiza la imagen de ejemplo para reproducirla
2. Haz un proyecto Tailwindcss
3. Construye la estructura que creas necesaria
4. Aplica las clases de Tailwindcss y compila
5. Una vez terminado guarda tu proyecto para entregarlo.
talos@unam.mx

Práctica 4: Previo del proyecto final
Página estructurada con Grid.
Pasos sugeridos:
1. Genera un proyecto compilado de Tailwindcss.
2. Haz con Grid la estructura.
3. Analiza la imagen, la práctica debe quedar
estructuralmente igual al ejemplo.
4. Asigna las clases Tailwindcss correspondientes a cada
sección.
5. Sube tus ejercicios y práctica del día a tu carpeta de
Drive
talos@unam.mx

Práctica 5: conclusión del proyecto final
Página estructurada con Grid.
Pasos sugeridos:
1. Continúa en tu proyecto de la sesión anterior.
2. Recuerda que la práctica terminada debe quedar
estructuralmente igual al ejemplo.
3. El tema, las fuentes, los colores y las imágenes son
libres.
4. Asigna las clases Tailwindcss a los elementos que
vayas integrando.
5. Sube tu práctica del día a tu carpeta de Drive

Taller TAILWIND

Cargado por

Copyright:

Formatos disponibles

Taller TAILWIND

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Taller TAILWIND

Cargado por

Copyright:

Formatos disponibles

Tailwindcss sesión: 1

Edgar Vargas Zermeño

2. Apariencia básica 4. Maquetación con Grid Layout

El Modelo-VIsta-Controlador(MVC) que diferencía el desarrollo en backend

Esto se vuelve más complicado cuando varios desarrolladores necesitan

Esto sucede si la persona que escribió las reglas de

Para un desarrollo en constante

Sobre todo en equipos de

Atomic CSS es un término acuñado en 2013 por Thierry

Koblentz habla de lo doloroso e intrincado que se torna

Tradicionalmente cada regla CSS representa un elemento

Los frameworks bajo el principio Utility-first le dan la vuelta

Donde p-10 podría representar a padding: 10px;

Al aplicar estilos predefinidos a los

Las clases de utilidad pueden

La idea de un enfoque basado en la

Tailwindcss se basa en Utility-first y es un

Su nombre se eligió pensando en el factor que te

Tailwindcss establece un conjunto de directivas que

● Código predecible, mantenible y escalable.

Se puede instalar en 3 contextos:

Tailwindcss rastrea los archivos y directorios que

Nuestro ejemplo utiliza fotos del portal

1. La práctica debe quedar como se ilustra.

2. Apariencia básica 4. Maquetación con Grid Layout

2. Apariencia básica 4. Maquetación con Grid Layout

Para utilizar este módulo en

Si fueran filas sería grid-rows-3.

Para que un elemento abarque

El elemento 4 del ejemplo

2. Apariencia básica 4. Maquetación con Grid Layout

2. Apariencia básica 4. Maquetación con Grid Layout

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.