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>

Cómo funciona

Definición del Grupo  Modificadores de Grupo

<section class="group bg-green-400 p-8">
    <div class="relative overflow-hidden group-hover:bg-blue-600">
        <p class="text-white absolute inset-0 flex items-center justify-center
           transition transform translate-y-full group-hover:translate-y-0">
            Este es un texto
        </p>
        <img src="<https://via.placeholder.com/150>" class="w-full h-full object-cover">
    </div>
</section>

Ejemplo simplificado

Dudas

Prácticas

Pregunta 1: 

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

/** @type {import('tailwindcss').Config} */
theme: {
    extend: {
      fontFamily: {
        "display": ['"Arial", "sans-serif"'],
        "marca": ['"Poppins", "sans-serif"'],
      },
      colors: {
        "carmen-primary": "#FF6363",
        "carmen-secondary": {
          100: "#E2E2D5",
          200: "#888883",
        },
      },
    },
  }
<!-- index.html -->
<div class="bg-primary text-secondary p-4">
  Custom Colors
</div>

¿Y si quiero agregar un nuevo valor?

Puedes agregar nuevos valores a las propiedades / clases de utilidad

Pregunta 2: 

¿Cómo se crean clases personalizadas en Tailwind CSS?

La directiva @apply

En nuestro archivo CSS

/* input.css */
.btn-custom {
  @apply bg-primary text-white py-2 px-4 rounded-lg shadow-lg;
}

<!-- index.html -->
<button class="btn-custom">
  Custom Button
</button>

Pregunta 3: 

 ¿Cómo se maneja el diseño responsive en Tailwind CSS?

Layout

CSS Grid y Flexbox

<!-- index.html -->
<div class="bg-blue-500 p-4 sm:bg-green-500 md:bg-red-500 lg:bg-yellow-500 xl:bg-purple-500">
  Responsive Box
</div>
class="w-[90%]"

Pregunta 4: 

¿Cómo se añaden transiciones y animaciones en Tailwind CSS?

<!-- index.html -->
<button class="bg-blue-500 text-white py-2 px-4 rounded transition duration-500 ease-in-out transform hover:bg-red-500 hover:scale-105">
  Hover me
</button>

Pregunta 5: 

¿Cómo se instalan y utilizan plugins en Tailwind CSS?

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Pregunta 6: 

¿Cómo puedo utilizar valores personalizados para tamaños en Tailwind CSS?

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}
<!-- index.html -->
<div class="w-72 h-84 bg-gray-200">
  Custom Spacing
</div>

Pregunta 7: 

¿Cómo puedo aplicar estilos condicionales para diferentes estados de un elemento (hover, focus, etc.)?

<!-- index.html -->
<input class="border-2 border-gray-300 focus:border-blue-500 focus:outline-none" type="text" placeholder="Focus me">

Pregunta 8: 

¿Cómo puedo gestionar el responsive design con Tailwind CSS utilizando breakpoints específicos?

<!-- index.html -->
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
  Responsive Text
</div>

Pregunta 9: 

¿Cómo se manejan las clases de utilidad para el grid en Tailwind CSS?

<!-- index.html -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-green-500 p-4">2</div>
  <div class="bg-red-500 p-4">3</div>
</div>

media queries

Repaso en la documentación

@layer components {
    .btn {
        @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }
  
    .my-area {
          grid-template-areas:
          "header"
          "navigation"
          "social-media"
          "logo"
          "footer";
      }

      .my-area-md {
          grid-template-areas:
          "logo           header      navigation"
          "social-media   navigation  footer"
          ;
      }
}

Pregunta 10: 

¿Cómo se incluyo una fuente custom en Tailwind CSS?

¿Y los estilos de fuente?

Tailwind sólo tiene 3 clases para font-family

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        "display": ['"Arial", "sans-serif"'],
        "marca": ['"Poppins", "sans-serif"'],
      }
    },
  },
  plugins: [],
}

Material UI

Como dependencia en el proyecto

Ejemplo práctico

Creación de un footer

Repositorio

Github

Creando una card

Con layout responsive

Recursos

Para seguir aprendiendo Tailwind

Tailwind Workshop

By Carmen Ansio

Tailwind Workshop

  • 615

More from Carmen Ansio