Introducción a Tailwind CSS

Una breve introducción a Tailwind CSS y a los elementos que lo conforman.

Transcript

1. TAILWIND CSS Alfredo Bonilla @brolag DEVTEAM504
2. ALFREDO BONILLA @brolag ¡HOLA! Tailwind CSS | @brolag Web Practice Lead en Gorilla Logic Co-Organizador GDG Pura Vida Co-Organizador de Angular Costa Rica
3. 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
4. Tailwind CSS | @brolag CSS SEMÁNTICO
5. Tailwind CSS | @brolag
6. Tailwind CSS | @brolag ¿Qué problemas han tenido organizando su código CSS?
7. Tailwind CSS | @brolag Dificultad para mantener estándares de código Efectos secundarios en lugares indeseados Probelmas de especificidad c.c. !important
8. Tailwind CSS | @brolag UTILITY FIRST
9. Tailwind CSS | @brolag
11. Tailwind CSS | @brolag TAILWIND CSS
12. 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.
13. 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
14. UTILITY FIRST Tailwind CSS | @brolag
15. ESTILOS BASE Tailwind CSS | @brolag
16. DISEÑO RESPONSIVO Tailwind CSS | @brolag
17. UTILIDADES PARA BREAKPOINTS Tailwind CSS | @brolag
18. UTILIDADES PARA PESUDOCLASES Tailwind CSS | @brolag
19. ESTILOS BASE PERSONALIZADOS Tailwind CSS | @brolag
20. ESTILOS BASE PERSONALIZADOS Tailwind CSS | @brolag
21. DIRECTIVA @APPLY Tailwind CSS | @brolag
22. FUENTES PERSONALIZADAS Tailwind CSS | @brolag
23. ARCHIVO DE CONFIGURACIÓN Tailwind CSS | @brolag
24. THEME Tailwind CSS | @brolag
25. 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
26. EXTRAER COMPONENTES Y NO CLASES Tailwind CSS | @brolag
27. SVG SIEMPRE SVG Tailwind CSS | @brolag
28. PURGE CSS OPTIMIZAR ANTES DE DESPLEGAR A PRODUCCIÓN Tailwind CSS | @brolag
29. 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
30. Tailwind CSS | @brolag MUCHAS GRACIAS @BROLAG