Cómo instalar y configurar TailwindCSS paso a paso

Instalación de Node.js y npm

Asegúrate de tener Node.js y npm instalados en tu sistema. Puedes descargarlo desde Node.js official site.

Crear un proyecto nuevo

Crea una nueva carpeta para tu proyecto y navega a ella en la terminal:

				
					mkdir mi-proyecto
cd mi-proyecto

Instala TailwindCSS

Instala TailwindCSS a través de npm:

				
					npm install -D tailwindcss
npx tailwindcss init

Esto creará un archivo tailwind.config.js en tu proyecto.

Configura TailwindCSS

En tu archivo tailwind.config.js, puedes personalizar la configuración según tus necesidades. Aquí hay un ejemplo básico:

				
					module.exports = {
  content: [
    "./**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configura los archivos CSS

Crea un archivo CSS y agrega las directivas de Tailwind:

				
					/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Para añadir un par de plugins a tu configuración de TailwindCSS, sigue estos pasos:

Instalar TailwindCSS y sus dependencias

Instalaremos PostCSS y Autoprefixer:

				
					npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Crear un archivo de configuración de PostCSS

Crea un archivo postcss.config.js en la raíz de tu proyecto con el siguiente contenido:

				
					module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Añadir plugins en TailwindCSS

Edita el archivo tailwind.config.js para incluir los plugins que deseas usar. Aquí hay dos ejemplos de plugins:

Plugin para tipografía y formularios personalizados

Primero, instala los plugins:

				
					npm install -D @tailwindcss/typography @tailwindcss/forms

Luego, edita tu tailwind.config.js para incluir los plugins:

				
					module.exports = {
  content: [
    './**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

Con estos pasos, has añadido con éxito dos plugins a tu configuración de TailwindCSS: uno para mejorar la tipografía y otro para manejar formularios personalizados.

Compila tu CSS

Configura un script en tu package.json para compilar el CSS:

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

Ejecuta el script:

				
					npm run build

Usa TailwindCSS en tu HTML

Crea un archivo HTML index.html y enlaza tu archivo CSS compilado:
				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/styles.css" rel="stylesheet">
  <title>Mi Proyecto con TailwindCSS</title>
</head>
<body class="bg-gray-100">
  <h1 class="text-3xl font-bold underline">
    ¡Hola, TailwindCSS!
  </h1>
<script src="//martagonzalez.dev/wp-content/cache/min/1/efc0696d9c52403b9d531796eef5fe06.js" data-minify="1" defer></script></body>
</html>

Ejecuta y prueba

Abre el archivo HTML en tu navegador para ver los estilos aplicados.

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones