Agregar Tailwind CSS en una página HTML
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.jsdelivr.net/npm/@tailwindcss/browser@4"></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.
Página web HTML con TailwindCSS
Un ejemplo de una página básica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi Página con Tailwind CSS</title>
<!-- Cargar Tailwind CSS desde CDN (solo para desarrollo o pruebas) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<!-- Header -->
<header class="bg-blue-600 text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-xl font-bold">Codea App</h1>
<nav>
<a href="#" class="mx-2 hover:underline">Inicio</a>
<a href="#" class="mx-2 hover:underline">Acerca</a>
<a href="#" class="mx-2 hover:underline">Contacto</a>
</nav>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto p-6">
<section class="bg-white p-6 rounded-lg shadow-md mb-6">
<h2 class="text-2xl font-semibold mb-4">Bienvenido</h2>
<p class="mb-4">Esta es una página web básica construida con Tailwind CSS.</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Haz clic aquí
</button>
</section>
<section class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4">Características</h2>
<ul class="list-disc pl-5 space-y-2">
<li>Diseño responsivo</li>
<li>Estilos rápidos con utilidades de Tailwind</li>
<li>Listo para personalizar</li>
</ul>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-4 mt-6">
<div class="container mx-auto text-center">
<p>© 2025 Codea App. Todos los derechos reservados.</p>
</div>
</footer>
</body>
</html>
Como se vería la página web
Opción 2: Implementar Tailwind CSS con CLI 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
La estructura de archivos para usar Tailwind CSS con su CLI es bastante sencilla. Aquí te muestro una estructura mínima recomendada para un proyecto frontend básico:
/mi-proyecto
│
├── /src
│ └── input.css ← Archivo fuente de Tailwind (donde importas las directivas @tailwind)
│
├── /dist
│ └── output.css ← Archivo generado por Tailwind CLI
│
├── index.html ← Tu archivo HTML que enlaza a output.css
├── tailwind.config.js ← Configuración de Tailwind (opcional pero recomendado)
└── package.json ← Si usas npm (opcional, pero útil para scripts)
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.
Crea una carpeta mi-proyecto, acceder a la carpeta y ejecutar el siguinete comando en una ventana cmd, terminal o cli
npm install tailwindcss @tailwindcss/cli
Paso 3: Import Tailwind in your CSS
En /src/input.css agrega lo siguiente:
@import "tailwindcss";
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.
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.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 output.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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TAILWIND CSS - CLI</title>
<link rel="stylesheet" href="dist/output.css">
</head>
<body>
<h1 class="text-blue-500 text-3xl">TAILWIND CSS CON CLI</h1>
</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.
- Entra en: Tailwind Play
Página web HTML con TailwindCSS
Página web HTML con TailwindCSS
Recurso del Tutorial
GratisTutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
