Introducción a Tailwind CSS

Slide 1

Slide 1 text

TAILWIND CSS Alfredo Bonilla @brolag DEVTEAM504

Slide 2

Slide 2 text

ALFREDO BONILLA @brolag ¡HOLA! Tailwind CSS | @brolag Web Practice Lead en Gorilla Logic Co-Organizador GDG Pura Vida Co-Organizador de Angular Costa Rica

Slide 3

Slide 3 text

CSS Semántico vs Utility First Tailwind CSS Diseño Responsivo Pseudo Clases Composición Buenas Prácticas TEMAS PARA EL DÍA DE HOY Pixelast | Design and Tech Tailwind CSS | @brolag

Slide 4

Slide 4 text

Tailwind CSS | @brolag CSS SEMÁNTICO

Slide 5

Slide 5 text

Tailwind CSS | @brolag

Slide 6

Slide 6 text

Tailwind CSS | @brolag ¿Qué problemas han tenido organizando su código CSS?

Slide 7

Slide 7 text

Tailwind CSS | @brolag Dificultad para mantener estándares de código Efectos secundarios en lugares indeseados Probelmas de especificidad c.c. !important

Slide 8

Slide 8 text

Tailwind CSS | @brolag UTILITY FIRST

Slide 9

Slide 9 text

Tailwind CSS | @brolag

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Tailwind CSS | @brolag TAILWIND CSS

Slide 12

Slide 12 text

Tailwind CSS | @brolag Tailwind es un framework de CSS que ofrece utilidades de bajo nivel para la construcción de diseños sin la necesidad de molestos dogmas difíciles de sobre escribir.

Slide 13

Slide 13 text

UTILITY FIRST Clases previamente definidas DISEÑO RESPONSIVO Clases específicas para cada media query PESUDO CLASES Elementos de estilo para pseudo clases PERSONALIZACIÓN Presentations are communication tools that can be used as demonstrations and reports. TAILWIND CSS Tailwind CSS | @brolag

Slide 14

Slide 14 text

UTILITY FIRST Tailwind CSS | @brolag

Slide 15

Slide 15 text

ESTILOS BASE Tailwind CSS | @brolag

Slide 16

Slide 16 text

DISEÑO RESPONSIVO Tailwind CSS | @brolag

Slide 17

Slide 17 text

UTILIDADES PARA BREAKPOINTS Tailwind CSS | @brolag

Slide 18

Slide 18 text

UTILIDADES PARA PESUDOCLASES Tailwind CSS | @brolag

Slide 19

Slide 19 text

ESTILOS BASE PERSONALIZADOS Tailwind CSS | @brolag

Slide 20

Slide 20 text

ESTILOS BASE PERSONALIZADOS Tailwind CSS | @brolag

Slide 21

Slide 21 text

DIRECTIVA @APPLY Tailwind CSS | @brolag

Slide 22

Slide 22 text

FUENTES PERSONALIZADAS Tailwind CSS | @brolag

Slide 23

Slide 23 text

ARCHIVO DE CONFIGURACIÓN Tailwind CSS | @brolag

Slide 24

Slide 24 text

THEME Tailwind CSS | @brolag

Slide 25

Slide 25 text

MEJORES PRÁCTICAS Tailwind CSS | @brolag Es preferible extraer componentes reutilizables en lugar de clases. EXTRAER COMPONENTES Es una buena idea utilizar SVG para casos de diseño más complejos. SVG Podemos reducir mucho el tamaño de nuestro bundle eliminando las clases que no utilizamos PURGE CSS

Slide 26

Slide 26 text

EXTRAER COMPONENTES Y NO CLASES Tailwind CSS | @brolag

Slide 27

Slide 27 text

SVG SIEMPRE SVG Tailwind CSS | @brolag

Slide 28

Slide 28 text

PURGE CSS OPTIMIZAR ANTES DE DESPLEGAR A PRODUCCIÓN Tailwind CSS | @brolag

Slide 29

Slide 29 text

RECURSOS PARA APRENDER MÁS https://tailwindcss.com/course https://mertjf.github.io/tailblocks/ https://tailwindcomponents.com/ https://tailwind-gradient-designer.csspost.com/ https://github.com/aniftyco/awesome-tailwindcss

Slide 30

Slide 30 text

Tailwind CSS | @brolag MUCHAS GRACIAS @BROLAG