7 pasos para instalar Tailwind CSS en Laravel 10

¿Estás llevando cursos de Laravel 9 y quieres instalar Tailwind? Pero, ¿qué es y para qué sirve? Tailwind es un framework CSS moderno que proporciona un conjunto único de clases de utilidad, las cuales hacen que el proceso de desarrollo sea muy fácil y los resultados en la toma de un diseño único.

Tailwind es un paquete de potencia de todo lo que necesitas para crear un sitio web sin escribir ningún CSS personalizado. Lo mejor es que con Laravel es fácil mantener la calidad del código mientras se utiliza Tailwind CSS. Entonces, ¿te gustaría saber cómo instalar este paquete en tu aplicación de Laravel? Hoy te brindamos los pasos a seguir, ¡sigue leyendo!

¿Qué es Tailwind CSS?

Tailwind CSS es un framework basado en la utilidad, por lo que proporciona un conjunto único de clases de utilidad que hace que el proceso de desarrollo muy fácil y los resultados en la toma de un diseño único. 

Este se caracteriza por ser altamente personalizable y de bajo nivel que te da todos los bloques de construcción que necesitas para construir diseños a medida sin ningún tipo de estilo que tengas que luchar para anular.

La belleza de este framework CSS radica en que no impone especificaciones de diseño o cómo debe ser tu sitio, simplemente juntas pequeños componentes para construir una interfaz de usuario que sea única. Lo que Tailwind simplemente hace es tomar un archivo CSS “crudo”, procesarlo sobre un archivo de configuración, y produce una salida.

Pasos para instalar Tailwind CSS en Laravel 9

Ahora que sabes para qué sirve Tailwind y lo que podrías realizar con esta framework, es probable que quieras probarla. Por ello, te explicaremos cómo instalar Tailwind en tu aplicación Laravel 9:

Paso #1: Crear un proyecto Laravel y dependencias instaladas

Antes de comenzar con la instalación de Tailwind CSS asegúrate de que tienes la configuración de Laravel lista junto con las dependencias instaladas. Hoy estamos empleando la versión 9 para realizar la demostración. Por tanto, asegúrate de que tienes node y npm instalados en tu computadora. Puedes confirmarlo ejecutando los siguientes comandos:

npm -v
node -v

Paso #2: Instalar Tailwind CSS

Ahora que ya confirmaste si cuentas con las dependencias mencionadas, es momento de proceder con la instalación. Para instalar Tailwind CSS debes seguir el siguiente comando y sus dependencias pares en tu proyecto laravel.

npm install -D tailwindcss postcss autoprefixer

Una vez instaladas las dependencias, ejecuta el siguiente comando para generar el archivo tailwind.config.js. Esto generará un archivo llamado tailwind.config.js en la raíz del proyecto.

npx tailwindcss init

Paso #3: Añadir Tailwind a la configuración de Laravel Mix

Un proyecto Laravel nuevo viene con Laravel Mix instalado. Esta herramienta es una envoltura alrededor de webpack, el cual simplifica la complejidad de webpack para la mayoría de los casos de uso.

Asimismo, Laravel Mix tiene su propio archivo de configuración llamado webpack.mix.js ubicado en la raíz del proyecto. Esta herramienta Mix utiliza este archivo para construir nuestros activos Javascript y CSS. En tu archivo webpack.mix.js, añade tailwindcss como plugin PostCSS.

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

Paso #4: Añadir ruta de contenido a Tailwind Config

Tailwind solo genera aquellos estilos en el archivo CSS de salida que hemos utilizado en nuestros archivos de vista. Por tanto, este framework necesita saber qué archivos buscar antes de generar el archivo CSS de salida. Para ello, debes abrir tu archivo tailwind.config.js y modificar la matriz de contenido para incluir todas las rutas de abajo.

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

Paso #5: Implementar las directivas de Tailwind a tu CSS

Abre el archivo app.css situado en el directorio resources > css y añade las directivas @tailwindd para cada una de las capas de Tailwind.

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

Paso #6: Ejecutar el proceso de construcción NPM

Ahora que ya tenemos la configuración lista, es momento de ejecutar el proceso de construcción para que Mix genere el archivo CSS de salida con las clases tailwind en este. Para ello, ejecuta el siguiente comando para construir los cambios:

npm run dev

Si deseas realizar cambios de forma continua a medida que los realizas, puedes ejecutar el comando watch. Este comando debería generar los archivos app.css y app.js en la carpeta pública.

npm run watch

Paso #7: Utilizar Tailwind en tu proyecto

Ahora podemos utilizar el archivo app.css generado en nuestros archivos de diseño blade. En el siguiente ejemplo, verás un nuevo archivo llamado app.blade.php en el directorio resources > views con el siguiente contenido. Con ello deberías obtener una salida que te asegure que el Tailwind CSS está funcionando correctamente.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl text-purple-600 font-bold underline text-center m-2">
    Welcome to TailwindCSS
  </h1>
</body>
</html>

¡Ahora ya sabes qué es Tailwind y cómo instalarlo en tu aplicación Laravel! Recuerda que con este framework podrás realizar tus diseños totalmente personalizados. Entonces, ¿qué estás esperando para probarlo? ¡Empieza a utilizarlo hoy mismo!

¿Te gustaría aprender a programar? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!