tailwindcss

César Ramírez

Full Stack Developer

¿Qué es TailwindCSS?

Es un framework de CSS basado en utility-first, para la rápida construcción de diseños personalizados.

  1. Desarrollado por Adam Wathan

  2. No es un UIkit, sin componentes

  3. Para construir diseño de sistemas

  4. Configurable

  5. Extendible

¿Qué es Utility-First?

Diferencias

Utilidades

  • Text/Border/Background Colors

  • Font Size/Family/Weight

  • Alignment

  • Padding/Margin

 

  • Positioning

  • Lists

  • Z-index

  • Opacity

  • Flexbox

 

Cómo se ve

Pseudo clases

.{state}{separator}{class}
/* hover */
<button class="bg-red-500 hover:bg-green-500 ...">
  This is a button
</button>

/* focus */
<input class="bg-gray-200 focus:bg-white ...">


/* disabled */
<button class="disabled:opacity-75 bg-blue-500...">
  Submit
</button>

/* visited */
<a href="#" class="text-blue-600 visited:text-purple-600 ...">
  Link
</a>

Responsive

xs: 640px

md: 768px

lg: 1024px

xl: 1280px

.{screen}{separator}{class}
<img class="w-16 md:w-32 lg:w-48" src="...">

<div class="bg-red-500 
            sm:bg-green-500 
            md:bg-blue-500 
            lg:bg-pink-500 
            xl:bg-teal-500">
</div>

En acción

Componentes

<button class="btn-blue">
  Button
</button>

<style>
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
</style>

Funciones y Directivas

@apply

@variants

@responsive

@screen

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}
/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}
@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}
.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

Configuración

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}

DEMO TIME

Recursos

tailwindcss.com

tailwindcss.com/screencasts

tailwindcomponents.com

youtube.com/adamwathan

Preguntas

Subtitle

deck

By César Antonio Ramírez Muñoz

Made with Slides.com

deck

  • 6

More from César Antonio Ramírez Muñoz