Tailwind

@carmenansio

Workshop

Making things move

LottieFiles

@carmenansio

Es necesario conocer la tecnología para saber sus pros y contras 

Introducción

¿Qué es TailwindCSS?

Tailwind CSS es un framework de CSS basado en utility-first

Un framework CSS contiene estilos y funcionalidades predefinidas para "hacerte la vida más fácil".

¿Entonces no es lo mismo que Bootstrap?

¿Clases de utilidad?

Necesitas saber CSS

.title {
  color: indigo;
  font-size: 4rem;
  text-align: center;
}
.indigo {
  color: indigo;
}

.font-xlarge {
  font-size: 4rem;
}

.text-center {
  text-align: center;
}
<h2 class="title">Soy un título</h2>
<h2 class="indigo font-xlarge text-center">Soy un título</h2>
/* style.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
<!-- index.html -->
<button class="bg-blue-500 text-white py-2 px-4 rounded">
  Button
</button>
h2 con clases CSS y de utilidad
Botones animados

¿Ventajas?

Tienes establecidas clases de utilidad

¿Ventajas?

  • No necesitas pensar en nombres de clases.

  • Simplifica la arquitectura de CSS.

  • Facilita la creación y reutilización de estilos.

RWD

Mobile first

Documentación

Oficial de Tailwind

Extensiones para VSCode

Tailwind CSS IntelliSense

Opciones de instalación

Tailwind CLI - Play CDN

Gestor de paquetes

npm

Gestor de paquetes

npm install -D tailwindcss

npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Crear la carpeta src

HTML y JavaScript

Crear carpeta CSS con las 3 directivas
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Nuevo script en el package.json

Las rutas las carga el diablo

--watch 👀
content: ["./src/**/*.{html,js}"]
Estilos de la directiva @base
<link rel="stylesheet" href="styles.css">

Módulos en Tailwind

Clases de Colores

Definir un valor personalizado

¿Cómo se personalizan los colores en Tailwind CSS?

class="text-[#DC2024]"
class="text-[200px]"

Definir un valor personalizado

Como background-color

class="bg-teal-700"
class="bg-teal-700/60"
class="bg-[patatablue]/80"

Módulos en Tailwind

Clases de posición

class="static fixed absolute relative sticky"
class="inset-0 inset-x-0 inset-y-0"

Módulos en Tailwind

Sistema de espaciado

Sufijo 1 == 4px
0 al 96
w-[202px]
.w-screen {
  width: 100vw;
} 

.h-screen {
  height: 100vh;
}

.w-1/2 {
  width: 50%;
}
Sufijos extra

auto - auto
min - min-content
max - max-content
fit - fit-content
screen - 100vw / 100vh
full - 100%

Demo

Interactividad avanzada

<section class="p-8 bg-green-400 group/section">
    <figure class="w-72 h-80 relative top-24 left-16 overflow-hidden group/figure">
        <p class="absolute inset-0 text-black bg-green-600/60 flex items-center justify-center font-semibold text-2xl z-20
        group-hover/figure:translate-y-0
        group-hover/section:bg-yellow-600/50
        transition">Este es un texto</p>
        <img src="<https://via.placeholder.com/150>" class="w-full h-full object-cover relative" id="img">
    </figure>
</section>
<section class="p-8 bg-green-400 group/section">
<figure class="w-72 h-80 relative top-24 left-16 overflow-hidden group/figure">
<p class="absolute inset-0 text-black bg-green-600/60 flex items-center justify-center font-semibold text-2xl z-20
    group-hover/figure:translate-y-0
    group-hover/section:bg-yellow-600/50
    transition">Este es un texto</p>
<img src="<https://via.placeholder.com/150>" class="w-full h-full object-cover relative" id="img">

Group modifiers

Desglose

<figure class="w-72 h-80 relative top-24 left-16 overflow-hidden group/figure">
<p class="absolute inset-0 text-black bg-green-600/60 flex items-center justify-center font-semibold text-2xl z-20
    group-hover/figure:translate-y-0
    group-hover/section:bg-yellow-600/50
    transition">Este es un texto</p>