Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 5 minutos Iniciación
que-es-y-como-empezar-con-tailwind

Qué es y cómo empezar con Tailwind CSS

Tailwind CSS es un framework de CSS que se centra en el modelo “utility first”, altamente configurable, y que nos permite crear interfaces y diseños de manera rápida.

A diferencia de otros frameworks CSS como Bootstrap o Foundation, Tailwind no viene con componentes prefabricados. En su lugar, proporciona un conjunto de clases de utilidad que se pueden combinar para crear cualquier diseño directamente en el HTML.

Es decir, Tailwind en lugar de definir un estilo button-green, define una enorme cantidad de clases “pequeñitas” para aplicar margen, color, padding, etc… Para casi todas las propiedades de CSS.

Luego tú las combinas como quieras en tu HTML. Un ejemplo para que se entienda:

<div class="bg-blue-500 text-white p-4">

Algunas de las características que han hecho de Tailwind tan popular son,

  1. Flexibilidad: Tailwind te permite crear diseños únicos sin tener que sobrescribir estilos predeterminados
  2. Reutilización: Las clases de utilidad pueden ser reutilizadas en diferentes componentes, reduciendo la redundancia
  3. Mantenimiento: Facilita el mantenimiento y la actualización del CSS en proyectos grandes

Tailwind es Open Source y todo su código y documentación están disponibles en la página oficial Tailwind CSS y el repositorio del proyecto en GitHub - tailwindlabs/tailwindcss

Instalación de Tailwind

Para comenzar a usar Tailwind CSS, primero necesitamos instalarlo (obvio 🤗). Tailwind se puede agregar a tu proyecto de varias maneras, pero la forma recomendada es mediante Nodejs y NPM (Node Package Manager) en tu ordenador.

Si no sabes lo que son, o quieres aprender más, te dejo por aquí estos dos cursitos 👇.

Una vez que tengas estos instalados, debemos inicializa tu proyecto con NPM si no lo has hecho aún:

npm init -y

Ahora, instala Tailwind CSS mediante npm:

npm install -D tailwindcss

Finalmente creamos el archivo de configuración de Tailwind con este comando.

npx tailwindcss init

Esto generará un archivo tailwind.config.js en la raíz de tu proyecto, donde puedes personalizar tu configuración de Tailwind.

Configuración básica

Vamos a ver cómo empezar a usar Tailwind en tu proyecto. Para eso, en la carpeta de tu proyecto

  • Creamos una carpeta styles
  • Dentro un fichero llamado main.css

Los nombres puedes usar los que tu quieras, y crear una carpeta es opcional. Pero lo vamos a hacer así para que esté todo más ordenado.

En tu archivo main.css, importa Tailwind CSS agregando las directivas necesarias:

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

Por otro lado, en tu fichero de configuración package.json vamos a añadir una acción (un script) para compilar tu CSS con Tailwind:

{
  "scripts": {
    "build:css": "tailwindcss build styles\\main.css -o dist\\main.css"
  }
}

Ahora puedes ejecutar el script para generar tu CSS compilado:

npm run build:css

Verás que Tailwind coge tu fichero de styles\main.css y genera el fichero dist\main.css que tiene tu código CSS optimizado, junto con algunos estilos propios que ha incluido Tailwind.

Integración con HTML

También es posible hacer que Tailwind analice los ficheros HTML y JavaScript, en búsqueda de todas las clases que estemos usando, que las incluya en el fichero CSS final. De hecho, esta es la forma que usaremos generalmente.

Para ello, en el fichero de configuración de Talwind modificamos el Content para que analice todos los ficheros HMTL y JavaScript de la carpeta src.

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

Ahora creamos la carpeta src, y en su interior un fichero de HTML que llamaremos index.html.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../dist/main.css" rel="stylesheet">
</head>

<body>
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
</body>

</html>

Ahora, si ejecutamos el comando npm run build:css veremos que en el fichero de salida dist\main.css Tailwind añade las clases detectadas en el fichero HTML (en este ejempl, text-3xl, font-bold y underline)

Modo interactivo con watch

También es posible lanzar Tailwind en modo “watch”. En esta forma Tailwind supervisará constantemente cualquier cambio en los ficheros HTML y JavaScript que hagamos.

Ante cualquier cambio, Tailwind reaccionará automáticamente para regenerar los ficheros de salida. Esto es muy útil durante la fase de desarrollo.

Para esto, simplemente editamos el fichero package.json y añadimos el siguiente script. npx tailwindcss -i ./src/input.css -o ./dist/output.css

{
  "scripts": {    
    "watch:css": "tailwindcss -i styles/main.css -o dist/main.css --watch"
  }
}

Ahora, si lanzamos el script watch:css, Tailwind arrancará en modo interactivo. Haz cualquier cambio en el HTML, y verás como se modifica el fichero dist/main.css automáticamente.

Directivas @apply

La directiva @apply permite reutilizar clases de utilidad dentro de tus reglas CSS personalizadas:

/* styles.css */
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

Esto aplica las clases de utilidad especificadas directamente a la regla .btn.

Uso de plugins

Tailwind cuenta con una amplia variedad de plugins oficiales y de la comunidad. Por ejemplo, para agregar tipografías personalizadas, puedes usar el plugin de tipografía de Tailwind:

npm install @tailwindcss/typography

Luego, agrégalo a tu configuración:

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

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github. github-full

En esta página