CursosBlogIniciar sesión

Lecciones del curso

Introducción a Tailwind

Introducción a Taiwlind CSS
12m
Instalación
5m
¿Cómo funciona Tailwind?
Instalando el plugin
¿Qué signifíca utility-first?
Estilos responsivos con Tailwind
Seudo-selectores
Composición de utilidades con @apply
Componentes Tailwind reutilizables
Personalizando el design system
Purgando el CSS

Instalación ✅

La forma más sencilla y directa de instalar Tailwind CSS es a través de su CLI (Command Line Interface) o interfaz de línea de comandos.

Misma que podemos instalar con npm.

npm i -D tailwindcss

Podemos instalar de forma local con -D y usarla con npx para crear el archivo de configuración que necesitamos para indicarle a Tailwind cómo debe comportarse.

npx tailwindcss init

Esto claro, lo hacemos dentro de la carpeta de nuestro proyecto en el nivel superior o raíz del proyecto.

Iniciando tu primer proyecto

Vamos a iniciar un proyecto web nuevo que solo consistirá en un archivo HTML. Instalaremos también un servidor de desarrollo que nos permita servir nuestra página web.

Comencemos entonces inicializando un proyecto con npm

Primero creamos la carpeta donde trabajaremos y entramos a ella.

mkdir tw-intro && $_

Después inicializamos nuestro proyecto

npm init -y
npm i -D tailwindcss
npx tailwindcss init

También debemos crear nuestro archivo HTML principal.

touch index.html

Si el comando touch no está disponible puedes usar type o copy en Windows.

Ahora que tenemos un archivo packaje.json, podemos configurar nuestros comandos, el primero será el de nuestro servidor de desarrollo.

En el archivo package.json agregaremos en la llave “scripts” el siguiente comando.

// ...
"scripts": {
    "serve": "npx live-server ."
  },
// ...

El punto es importante, para que el servidor entregue también el archivo de nuestros estilos y cualquier otro estático o asset.

Agregaremos ahora el maquetado básico a nuestro archivo HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hola Blissmo</h1>
  </body>
</html>

Puedes copiar y pegar este código o utilizar el signo de exclamación (!) en VSCode, lo que te ofrecerá este mismo maquetado.

Configurando Tailwind CSS

En el archivo de configuración de Tailwind tailwind.config.js que generamos cuando ejecutamos el comando init, indicaremos los archivos en los que usaremos las utilidades de Tailwind. En nuestro caso ese archivo es index.html, así que lo agregamos dentro del array de la llave content.

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

Con esto Tailwind ahora sabe donde buscar sus utilidades para genera el archivo CSS que incluirá solo lo necesario.

Lo siguiente es utilizar un par de utilidades para probar que estos estilos se generen correctamente, así que agregaremos dos utilidades a nuestro <h1>.

<h1 class="text-6xl text-blue-500">Hola Blissmo</h1>

Vamos a exagerar el tamaño y el color de nuestro <h1> con text-6xl y text-blue-500. Más adelante en el curso aprenderemos estas utilidades en orden, por ahora solo queremos probar.

El ultimo archivo que necesitamos es un archivo CSS que nos servirá como fuente de origen para generar el resultante a partir de él. Agregamos un archivo nuevo en la raíz de nuestro proyecto con el nombre tailwind.css aunque puedes llamarlo como gustes.

touch tailwind.css

Dentro de este archivo colocaremos las directivas básicas de Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Ahora sí, todo está en su lugar. 🥳

Para que Tailwind genere el archivo resultante debemos ejecutar el correspondiente comando.

La magia de Tailwind CSS

Es hora de ejecutar el comando que genera nuestro archivo CSS resultante con Tailwind. Este comando conviene que lo memorices, pues te será muy útil en el futuro para usar Tailwind en cualquier entorno en el que te encuentres.

npx tailwindcss -i tailwind.css -o style.css

Observa que utilizamos el flag -i para indicar el archivo de origen y la flag -o para indicar el archivo de salida o resultante. Recuerda que los nombres tú los decides, pero por ahora usaremos las convenciones.

ejecutamos este comando y después entramos al archivo de salida. Al final del archivo, después de las utilidades base de Tailwind, encontraremos el par de utilidades que usamos en nuestro <h1>.

// ...

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

¿Genial no? Pero claro, no queremos escribir este comando cada que usamos una nueva utilidad, por eso vamos a agregar este comando en nuestro archivo package.json para que se ejecute automáticamente cada que corramos nuestro servidor.

Y no te olvides de agregar la etiqueta <link> a nuestro archivo HTML para relacionar el archivo resultante.

// ...

<link rel="stylesheet" href="style.css">

// ...

Agregando el comando a package.json

Agregaremos dos nuevos scripts o comandos a nuestro archivo package.json. El primero será el que ya conocemos para generar el archivo CSS resultante, pero con una flag extra: -w.

"watch": "tailwindcss -w -i tailwind.css -o style.css",

Esta nueva flag -w mantendrá a tailwind observando nuestro archivo HTML para generar en tiempo real nuestras utilidades.

El segundo comando utilizará una biblioteca llamada concurrently que nos permite ejecutar dos comandos al mismo tiempo, en paralelo.

👀 También podemos usar —watch

"dev": "npx concurrently \"npm run watch\" \"npm run serve\" "

De esta forma podremos mantener corriendo nuestro servidor a la vez que tailwind se mantiene analizando nuestros archivos.

Bueno probemos esto pues. Ejecutamos el comando npm run dev.

Lo que levantará un servidor, regularmente en el puerto 8080 que nos permite ver nuestra pagina web en el navegador. 👁️🌐

Para comprobar que estamos listos para trabajar con Tailwind, con el servidor corriendo, agregaremos una utilidad más.

Sin apagar el servidor, ve a tu <h1> y agrega la utilidad text-center.

// ...

<h1 class="text-center text-6xl text-blue-500">Hola Blissmo</h1>

// ...

Luego vuelve al navegador, al actualizar la página el cambio debería ser obvio. Y al visitar el archivo style.css resultante, Tailwind debió agregar la nueva utilidad.

// ...

.text-center {
  text-align: center;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

Perfecto. Ahora sí, todo esta listo, ya podemos usar Tailwind CSS con confianza. 🚀