Guía completa para implementar Tailwind CSS en tu página HTML

Aprende a agregar Tailwind CSS a tu proyecto HTML de forma sencilla, ya sea usando un CDN o instalándolo localmente. Mejora el diseño de tu web con facilidad.

Suscríbete a nuestro canal en Youtube

Para implementar Tailwind CSS en una página web HTML, puedes hacerlo de forma muy sencilla usando dos métodos principales: a través de un CDN (ideal para proyectos pequeños o prototipos) o instalándolo localmente mediante npm para proyectos más grandes.

Opción 1: Implementar Tailwind CSS usando CDN

Esta es la forma más rápida y sencilla de agregar Tailwind CSS a tu proyecto HTML. Solo necesitas incluir el archivo del CDN en el <head> de tu archivo HTML.

Pasos:

Crea un archivo HTML (por ejemplo, index.html).
Agrega el enlace CDN de Tailwind en la sección <head> de tu archivo.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS con CDN</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto text-center">
        <h1 class="text-4xl font-bold text-blue-600 mt-10">¡Hola, Tailwind CSS!</h1>
        <p class="text-gray-600 mt-4">Esta página usa Tailwind CSS a través del CDN.</p>
    </div>
</body>
</html>

Ventajas:

No necesitas configurar nada más que el enlace CDN.
Ideal para proyectos pequeños, prototipos o cuando solo necesitas estilos rápidos.

Desventajas:

No es óptimo para producción, ya que puede incluir todas las clases de Tailwind, lo que incrementa el tamaño del archivo CSS.
Menor control sobre la configuración y personalización de Tailwind.

Opción 2: Implementar Tailwind CSS de forma local (instalación npm)

Si planeas crear un proyecto más grande o necesitas personalizar Tailwind, es mejor instalarlo localmente. Aquí te muestro cómo hacerlo. Para instalar Tailwind CSS usando npm, necesitarás seguir algunos pasos específicos. Aquí te dejo una guía detallada de lo que necesitas y cómo hacerlo. Node.js y npm: Debes tener Node.js instalado en tu sistema, lo que también incluye npm (Node Package Manager). Puedes descargarlo e instalarlo desde nodejs.org.

Paso 1: Crear la estructura del proyecto

Crea una estructura básica para tu página web. En tu carpeta de proyecto, crea una estructura como esta:

bash

/proyecto
    /src
        /css
            app.css
    index.html

Paso 2: Inicializar el proyecto con npm

Abre la terminal en la raíz del proyecto y ejecuta los siguientes comandos para inicializar el proyecto y agregar las dependencias de Tailwind CSS.

bash

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Paso 3: Configurar Tailwind CSS

Tailwind genera un archivo de configuración llamado tailwind.config.js. Debes configurarlo para que Tailwind escanee los archivos donde usas sus clases. Ajusta el archivo tailwind.config.js de la siguiente manera:

module.exports = {
  content: ['./index.html'], // Archivos que Tailwind escaneará
  theme: {
    extend: {},
  },
  plugins: [],
}

Paso 4: Añadir Tailwind a tu archivo CSS

En la carpeta src/css/, crea un archivo llamado app.css y añade las directivas de Tailwind CSS:

css

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

Paso 5: Compilar el archivo CSS con Tailwind

Añade un script de compilación en el archivo package.json para generar el archivo CSS final.

json

"scripts": {
  "build": "tailwindcss -i ./src/css/app.css -o ./dist/css/style.css --watch"
}

Este comando compilará el archivo CSS de Tailwind y lo almacenará en la carpeta dist.

Paso 6: Compilar Tailwind CSS

Ejecuta el siguiente comando para generar el archivo CSS:

bash

npm run build

Esto generará el archivo style.css dentro de la carpeta dist/css/.

Paso 7: Vincular el archivo CSS en tu HTML

Finalmente, en tu archivo HTML, vincula el archivo CSS compilado:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Local</title>
    <link href="./dist/css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto text-center">
        <h1 class="text-4xl font-bold text-blue-600 mt-10">¡Hola, Tailwind CSS!</h1>
        <p class="text-gray-600 mt-4">Esta página usa Tailwind CSS instalado localmente.</p>
    </div>
</body>
</html>

Ventajas:

Puedes personalizar la configuración de Tailwind (colores, tipografía, etc.).
El archivo CSS final solo incluye las clases que realmente usas (optimización para producción).
Mejor control sobre el flujo de trabajo.

Desventajas:

Requiere un poco más de configuración y conocimientos básicos de npm.

Opción 3: Usar Tailwind Play

Si solo quieres probar Tailwind rápidamente, puedes usar Tailwind Play, una plataforma en línea para crear y probar proyectos con Tailwind CSS sin necesidad de instalación.