Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a Tailwind CSS

Introducción a Tailwind CSS

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

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

October 27, 2020
Tweet

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

  10. None
  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