A todo sitio web Laravel le vendría bien algo de estilo, y Tailwind CSS es la forma más sencilla de darle un toque a tu sitio. Este framework CSS basado en utilidades ofrece clases predefinidas para dar estilo a tus elementos HTML. En lugar de escribir código CSS interminable, puedes crear páginas web personalizadas rápidamente y luego mantener y escalar fácilmente tus hojas de estilo.

Tailwind forma parte del stack TALL, junto con Alpine.js y Livewire. La comunidad Laravel construyó esta solución de desarrollo de stack completo para ayudar a los desarrolladores de todos los niveles de habilidad a crear rápidamente prototipos de aplicaciones web. Estas soluciones son fáciles de usar sin necesidad de profundos conocimientos de tecnologías front-end o back-end.

Este artículo práctico explora cómo utilizar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo utilizando MyKinsta.

Mejora Tu Proyecto Laravel con Tailwind

Para empezar, crea una página básica de Laravel y utiliza Tailwind CSS para darle estilo con el mínimo esfuerzo.

Requisitos Previos

Para seguir el tutorial, necesitas:

Para ver el proyecto final, consulta el código completo del proyecto.

Proyecto Laravel y Configuración de Tailwind

Para crear un nuevo proyecto Laravel utilizando Composer:

  1. Abre el terminal en el directorio donde quieres que viva el proyecto y ejecútalo:
composer create-project laravel/laravel my-project
  1. Ve al directorio my-project para instalar los paquetes necesarios:
cd my-project
  1. Instala los paquetes para trabajar con Tailwind:
npm install -D tailwindcss postcss autoprefixer
  1. Ejecuta el siguiente comando para configurar los archivos de configuración de Tailwind:
npx tailwindcss init -p

Esta acción coloca dos archivos en el root de tu proyecto: tailwind.config.js y postcss.config.js.

Configura las Rutas de Tus Plantillas

  1. A continuación, configura las rutas de tus plantillas en el archivo tailwind.config.js. Por defecto, Laravel busca los archivos CSS en el directorio ‘public’. La ruta de la plantilla indica a Laravel dónde encontrar los archivos CSS de la aplicación.
  1. Sustituye el código dentro del archivo tailwind.config.js por esto:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Añade las Directivas CSS de Tailwind al CSS del Proyecto

  1. Para añadir las directivas CSS de Tailwind, ve a la carpeta resources/css y abre el archivo app.css.
  1. A continuación, añade el siguiente código:
@tailwind base;
@tailwind components;
@tailwind utilities;

Construye la Aplicación

Antes de ejecutar tu aplicación localmente:

  1. Inicia el servidor de desarrollo Vite:
npm run dev

Este comando agrupa tu archivo de recursos estáticos, incluyendo el CSS de Tailwind, e inicia el servidor local de Vite.

  1. Utiliza Artisan para ejecutar tu aplicación Laravel:
php artisan serve

Tu app debería ejecutarse ahora en http://127.0.0.1:8000/. Muestra la salida por defecto de una aplicación Laravel recién creada.

Al abrir el archivo de vista de ruta resources/views/welcome.blade.php, puedes ver que ya utiliza clases de utilidad de Tailwind.

Cómo Hacer un Componente Tailwind Sencillo

Para entender mejor cómo funciona Tailwind:

  1. Abre resources/views/welcome.blade.php.
  1. Elimina el código de la vista de bienvenida de la aplicación.
  1. Sustitúyelo por el código siguiente, que muestra un bonito componente de tarjeta:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

El código anterior utiliza Vite para importar el archivo app.css a través de @vite('resources/css/app.css'). También importa Tailwind. Crea un componente básico para maquetar una tarjeta de blog utilizando estas clases de utilidad CSS de Tailwind:

  • max-w-sm — Establece el ancho máximo del contenedor al tamaño del breakpoint (pequeño).
  • m-24 – Añade un margen de 24 unidades (96px o 6rem) a todos los lados del contenedor.
  • rounded – Añade un radio de borde para redondear las esquinas del contenedor.
  • overflow-hidden – Oculta cualquier contenido que desborde el contenedor.
  • shadow-lg – Añade un efecto de sombra al contenedor.
  • w-full – Establece la anchura de la imagen al 100% de su contenedor.
  • px-6 py-4 – Añade un relleno de 6 unidades (24px o 1,5rem) en el eje x y de 4 unidades (16px o 1rem) en el eje y.
  • font-bold – Establece el peso de la fuente del texto en negrita.
  • text-xl – Establece el tamaño de fuente del texto en extragrande.
  • mb-2 – Añade un margen inferior de 2 unidades (0,5rem u 8px) al elemento.
  • text-gray-600 – Establece el color del texto en gris oscuro.
  • text-base – Establece el tamaño de fuente del texto como predeterminado.

Cuando previsualices tu aplicación en el navegador, deberías ver una salida similar a la siguiente.

Componente de muestra en una página web
Componente de muestra en una página web

Despliega Tu Proyecto Laravel Tailwind en Kinsta

Antes de desplegar y alojar tu aplicación Laravel utilizando Kinsta, realiza algunos cambios más para asegurarte de que funciona correctamente cuando esté alojada.

  1. Abre app/Http/Middleware/TrustProxies.php. Cambia el valor de protected $proxies para permitir que tu aplicación Laravel confíe en todos los proxies:
protected $proxies = '*';
  1. Crea un nuevo archivo .htaccess en el directorio root de tu proyecto y pega el siguiente código:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Crea un nuevo repositorio Git y envía tu código a él (Kinsta soporta el envío desde GitHub, GitLab y Bitbucket).
  1. Accede a tu cuenta Kinsta o crea una nueva. Una vez en tu Panel MyKinsta, haz clic en el botón Añadir servicio, luego selecciona Aplicación, como en la captura de pantalla de abajo.
Añadir una aplicación en MyKinsta
Añadir una aplicación en MyKinsta

MyKinsta te pedirá que conectes tu cuenta Git. Completa la autorización tal y como se te pide, luego selecciona el proyecto que has enviado previamente a tu repositorio y la rama que quieres utilizar.

Configurar los detalles de la nueva aplicación en Kinsta
Configurar los detalles de la nueva aplicación en Kinsta
  1. Añade tu Laravel APP_KEY en la sección Variables de entorno. La clave está en el archivo .env de tu directorio local del proyecto.
Configurar las variables de entorno de la aplicación en Kinsta
Configurar las variables de entorno de la aplicación en Kinsta
  1. Haz clic en Continuar y selecciona el entorno de construcción según tus preferencias.
  1. Por ahora, deja en blanco el comando de inicio en la sección Recursos y, a continuación, haz clic en Continuar para proseguir.
  1. Por último, completa la información de pago. El despliegue se inicia inmediatamente.

Necesitas dos paquetes de construcción para ejecutar correctamente tu aplicación: PHP para ejecutar los comandos de php, y Node.js, para ejecutar los comandos de npm. Para ello:

  1. Ve a tu aplicación y, en la parte izquierda de la navegación, haz clic en Configuración.
  1. Haz clic en Añadir buildpack y añade los paquetes de construcción para Node.js y PHP. Sin embargo, asegúrate de que el paquete de construcción de PHP se añade el último de la secuencia, ya que se trata de una aplicación basada en PHP.
  1. Haz clic en el botón Desplegar Ahora que aparece después de añadir los nuevos paquetes de construcción, como se muestra en la imagen siguiente.
Despliega la aplicación después de añadir el buildpack en Kinsta
Despliega la aplicación después de añadir el buildpack en Kinsta
  1. Por último, ve a la pestaña Procesos de tu aplicación, edita el proceso Web predeterminado y sustituye su comando de Inicio por lo siguiente:
npm run build && heroku-php-apache2
Actualizar el comando de inicio del proceso en Kinsta
Actualizar el comando de inicio del proceso en Kinsta

Tras actualizar el comando de inicio, tu aplicación se volverá a desplegar automáticamente con el nuevo comando. Una vez que el despliegue se haya realizado correctamente, podrás visitar el dominio para ver el espectacular componente de tarjeta que has creado y empezar a probar y desarrollar tu aplicación.

Resumen

Tailwind ayuda a elevar tu proyecto Laravel de simplemente básico a absolutamente impresionante. Es fácil de usar, lo que le ahorra escribir montones masivos de código sólo para obtener la apariencia que deseas.

Ahora que sabes lo básico, explora las capacidades de Tailwind para mejorar el aspecto de tu aplicación con fuentes fantásticas y efectos fascinantes. Después, despliégala utilizando MyKinsta para que el mundo también disfrute de tu aplicación.

Marcia Ramos Kinsta

Soy el Jefe del Equipo Editorial de Kinsta. Soy una entusiasta del código abierto y me encanta programar. Llevo más de 7 años escribiendo y editando textos técnicos para el sector tecnológico, y me encanta colaborar con la gente para crear contenidos claros y concisos y mejorar los flujos de trabajo.