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.

Alfredo Bonilla

October 27, 2020
Tweet

More Decks by Alfredo Bonilla

Other Decks in Programming

Transcript

  1. ALFREDO BONILLA @brolag ¡HOLA! Tailwind CSS | @brolag Web Practice

    Lead en Gorilla Logic Co-Organizador GDG Pura Vida Co-Organizador de Angular Costa Rica
  2. 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
  3. Tailwind CSS | @brolag Dificultad para mantener estándares de código

    Efectos secundarios en lugares indeseados Probelmas de especificidad c.c. !important
  4. 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.
  5. 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
  6. 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