Tailwind CLI

En esta clase, aprenderás a instalar y configurar Tailwind CSS utilizando NPM, dejando atrás el uso del Play CDN para avanzar hacia un entorno más profesional y personalizado en tus proyectos de desarrollo.

Objetivo

Pasar de usar el CDN de Tailwind a configurar un entorno de desarrollo con NPM, lo que incluye:

Crear un archivo de configuración de Tailwind.
Definir rutas para las plantillas HTML, PHP y otros archivos.
Generar un archivo CSS que se ajuste automáticamente al contenido del proyecto.

Pasos para Configurar Tailwind con NPM

1. Instalar Tailwind CSS

Primero, es necesario instalar Tailwind CSS como una dependencia de desarrollo. Utiliza el siguiente comando en tu terminal:

npm install -D tailwindcss

Esto añadirá Tailwind CSS a las dependencias de tu proyecto en el archivo package.json.

2. Generar el Archivo de Configuración

Después de la instalación, genera un archivo de configuración predeterminado de Tailwind con el siguiente comando:

npx tailwindcss init

Este comando crea un archivo tailwind.config.js, donde podrás personalizar la configuración según las necesidades de tu proyecto.

3. Configurar las Rutas de las Plantillas

En el archivo tailwind.config.js, define las rutas donde se encuentran los archivos que Tailwind debe analizar. Por ejemplo:

module.exports = {
  content: [
    './secciones/**/*.php',
    './home/**/*.php'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Esto le indica a Tailwind que escanee las rutas especificadas para generar las clases necesarias.

4. Crear el Archivo CSS

Crea un archivo CSS que Tailwind utilizará como base para generar el diseño. Por ejemplo, un archivo style.css con el siguiente contenido:

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

Este archivo cargará las configuraciones base, los componentes predefinidos y las utilidades de Tailwind.

5. Construir el CSS

Ejecuta el siguiente comando para generar un archivo CSS procesado:

npx tailwindcss -i ./style.css -o ./public/css/style-pro.css --watch

-i: Archivo de entrada.
-o: Archivo de salida procesado.
--watch: Mantiene el proceso activo para actualizar automáticamente el CSS cada vez que se realicen cambios en los archivos.

El resultado será un archivo CSS optimizado para tu proyecto.

6. Incluir el CSS Generado en tu Proyecto

En tu HTML, enlaza el archivo CSS generado para que el navegador lo cargue correctamente. Por ejemplo:

<link rel="stylesheet" href="/public/css/style-pro.css">

Esto asegura que todas las clases generadas por Tailwind estén disponibles en tu proyecto.

Verificación del Funcionamiento

Para comprobar que todo está configurado correctamente:

Añade una clase de Tailwind a algún elemento en tu proyecto, por ejemplo:

<div class="text-red-500">Hola Mundo</div>

Asegúrate de que el archivo CSS generado esté enlazado en tu proyecto.
Recarga la página y verifica que los estilos se apliquen.

Consideraciones Finales

Si defines clases personalizadas o usas colores y configuraciones avanzadas, Tailwind actualizará automáticamente el archivo CSS generado.
En futuras clases, exploraremos cómo extender aún más la funcionalidad con plugins y personalización avanzada.

Con estos pasos, ya tienes una configuración básica para trabajar con Tailwind CSS en proyectos más avanzados. ¡Nos vemos en la próxima clase!

¡Obtén acceso a todos los cursos!