{"id":68916,"date":"2023-08-07T18:30:57","date_gmt":"2023-08-07T16:30:57","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=68916&#038;preview=true&#038;preview_id=68916"},"modified":"2023-08-23T17:39:22","modified_gmt":"2023-08-23T15:39:22","slug":"laravel-tailwind","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/","title":{"rendered":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel"},"content":{"rendered":"<p>A todo sitio web Laravel le vendr\u00eda bien algo de estilo, y <a href=\"https:\/\/kinsta.com\/es\/blog\/tailwind-css\/\">Tailwind CSS es la forma m\u00e1s sencilla de darle un toque a tu sitio<\/a>. Este framework CSS basado en utilidades ofrece clases predefinidas para dar estilo a tus elementos HTML. En lugar de escribir c\u00f3digo CSS interminable, puedes crear p\u00e1ginas web personalizadas r\u00e1pidamente y luego mantener y escalar f\u00e1cilmente tus hojas de estilo.<\/p>\n<p>Tailwind forma parte del <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">stack TALL<\/a>, junto con Alpine.js y Livewire. La comunidad Laravel construy\u00f3 esta soluci\u00f3n de desarrollo de stack completo para ayudar a los desarrolladores de todos los niveles de habilidad a crear r\u00e1pidamente prototipos de aplicaciones web. Estas soluciones son f\u00e1ciles de usar sin necesidad de profundos conocimientos de tecnolog\u00edas front-end o back-end.<\/p>\n<p>Este art\u00edculo pr\u00e1ctico explora c\u00f3mo utilizar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo utilizando MyKinsta.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Mejora Tu Proyecto Laravel con Tailwind<\/h2>\n<p>Para empezar, crea una p\u00e1gina b\u00e1sica de Laravel y utiliza Tailwind CSS para darle estilo con el m\u00ednimo esfuerzo.<\/p>\n<h3>Requisitos Previos<\/h3>\n<p>Para seguir el tutorial, necesitas:<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> y <a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> instalados.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> y npm instalados.<\/li>\n<li>Cuenta <a href=\"https:\/\/my.kinsta.com\/?lang=es\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> para el despliegue. Si a\u00fan no tienes una cuenta, <a href=\"https:\/\/kinsta.com\/es\/suscripcion\/?product_type=app-db\">reg\u00edstrate para una prueba gratuita<\/a>.<\/li>\n<\/ul>\n<p>Para ver el proyecto final, consulta el <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">c\u00f3digo completo del proyecto<\/a>.<\/p>\n<h2>Proyecto Laravel y Configuraci\u00f3n de Tailwind<\/h2>\n<p>Para crear un nuevo proyecto Laravel utilizando Composer:<\/p>\n<ol start=\"1\">\n<li>Abre el terminal en el directorio donde quieres que viva el proyecto y ejec\u00fatalo:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>Ve al directorio <strong>my-project<\/strong>\u00a0para instalar los paquetes necesarios:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Instala los paquetes para trabajar con Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>Ejecuta el siguiente comando para configurar los archivos de configuraci\u00f3n de Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Esta acci\u00f3n coloca dos archivos en el root de tu proyecto: <strong>tailwind.config.js<\/strong> y <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Configura las Rutas de Tus Plantillas<\/h2>\n<ol start=\"1\">\n<li>A continuaci\u00f3n, configura las rutas de tus plantillas en el archivo <strong>tailwind.config.js<\/strong>. Por defecto, Laravel busca los archivos CSS en el directorio &#8216;public&#8217;. La ruta de la plantilla indica a Laravel d\u00f3nde encontrar los archivos CSS de la aplicaci\u00f3n.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Sustituye el c\u00f3digo dentro del archivo <strong>tailwind.config.js<\/strong> por esto:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\ncontent: [\n\".\/resources\/**\/*.blade.php\",\n\".\/resources\/**\/*.js\",\n\".\/resources\/**\/*.vue\",\n],\ntheme: {\nextend: {},\n},\nplugins: [],\n}<\/code><\/pre>\n<h2>A\u00f1ade las Directivas CSS de Tailwind al CSS del Proyecto<\/h2>\n<ol start=\"1\">\n<li>Para a\u00f1adir las directivas CSS de Tailwind, ve a la carpeta <strong>resources\/css<\/strong> y abre el archivo <strong>app.css<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>Construye la Aplicaci\u00f3n<\/h2>\n<p>Antes de ejecutar tu aplicaci\u00f3n localmente:<\/p>\n<ol start=\"1\">\n<li>Inicia el servidor de desarrollo Vite:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Este comando agrupa tu archivo de recursos est\u00e1ticos, incluyendo el CSS de Tailwind, e inicia el servidor local de Vite.<\/p>\n<ol start=\"2\">\n<li>Utiliza Artisan para ejecutar tu aplicaci\u00f3n Laravel:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Tu app deber\u00eda ejecutarse ahora en <code>http:\/\/127.0.0.1:8000\/<\/code>. Muestra la salida por defecto de una aplicaci\u00f3n Laravel reci\u00e9n creada.<\/p>\n<p>Al abrir el archivo de vista de ruta <strong>resources\/views\/welcome.blade.php<\/strong>, puedes ver que ya utiliza clases de utilidad de Tailwind.<\/p>\n<h2>C\u00f3mo Hacer un Componente Tailwind Sencillo<\/h2>\n<p>Para entender mejor c\u00f3mo funciona Tailwind:<\/p>\n<ol start=\"1\">\n<li>Abre <strong>resources\/views\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Elimina el c\u00f3digo de la vista de bienvenida de la aplicaci\u00f3n.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Sustit\u00fayelo por el c\u00f3digo siguiente, que muestra un bonito componente de tarjeta:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n      @vite('resources\/css\/app.css')\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"max-w-md  m-24 rounded overflow-hidden shadow-lg\"&gt;\n      &lt;img class=\"w-full\" src=\"https:\/\/picsum.photos\/400\/300\" alt=\"Blog Image\"&gt;\n      &lt;div class=\"px-6 py-4\"&gt;\n        &lt;h2 class=\"font-bold text-2xl mb-2\"&gt;This is My Blog Title&lt;\/h2&gt;\n        &lt;p class=\"mt-3 text-gray-600 text-base\"&gt;\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,\n                exercitationem praesentium nihil.\n        &lt;\/p&gt;\n        &lt;button class=\"mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded\"&gt;\n            Read More\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>El c\u00f3digo anterior utiliza Vite para importar el archivo <strong>app.css<\/strong> a trav\u00e9s de <code>@vite('resources\/css\/app.css')<\/code>. Tambi\u00e9n importa Tailwind. Crea un componente b\u00e1sico para maquetar una tarjeta de blog utilizando estas clases de utilidad CSS de Tailwind:<\/p>\n<ul>\n<li><code>max-w-sm<\/code> \u2014 Establece el ancho m\u00e1ximo del contenedor al tama\u00f1o del breakpoint (peque\u00f1o).<\/li>\n<li><code>m-24<\/code> &#8211; A\u00f1ade un margen de 24 unidades (96px o 6rem) a todos los lados del contenedor.<\/li>\n<li><code>rounded<\/code> &#8211; A\u00f1ade un radio de borde para redondear las esquinas del contenedor.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Oculta cualquier contenido que desborde el contenedor.<\/li>\n<li><code>shadow-lg<\/code> &#8211; A\u00f1ade un efecto de sombra al contenedor.<\/li>\n<li><code>w-full<\/code> &#8211; Establece la anchura de la imagen al 100% de su contenedor.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; A\u00f1ade un relleno de 6 unidades (24px o 1,5rem) en el eje x y de 4 unidades (16px o 1rem) en el eje y.<\/li>\n<li><code>font-bold<\/code> &#8211; Establece el peso de la fuente del texto en negrita.<\/li>\n<li><code>text-xl<\/code> &#8211; Establece el tama\u00f1o de fuente del texto en extragrande.<\/li>\n<li><code>mb-2<\/code> &#8211; A\u00f1ade un margen inferior de 2 unidades (0,5rem u 8px) al elemento.<\/li>\n<li><code>text-gray-600<\/code> &#8211; Establece el color del texto en gris oscuro.<\/li>\n<li><code>text-base<\/code> &#8211; Establece el tama\u00f1o de fuente del texto como predeterminado.<\/li>\n<\/ul>\n<p>Cuando previsualices tu aplicaci\u00f3n en el navegador, deber\u00edas ver una salida similar a la siguiente.<\/p>\n<figure style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-blog-post.jpg\" alt=\"Componente de muestra en una p\u00e1gina web\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Componente de muestra en una p\u00e1gina web<\/figcaption><\/figure>\n<h2>Despliega Tu Proyecto Laravel Tailwind en Kinsta<\/h2>\n<p>Antes de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">desplegar y alojar tu aplicaci\u00f3n Laravel<\/a> utilizando Kinsta, realiza algunos cambios m\u00e1s para asegurarte de que funciona correctamente cuando est\u00e9 alojada.<\/p>\n<ol start=\"1\">\n<li>Abre <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. Cambia el valor de <code>protected $proxies<\/code> para permitir que tu aplicaci\u00f3n Laravel conf\u00ede en todos los proxies:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Crea un nuevo archivo <strong>.htaccess<\/strong> en el directorio root de tu proyecto y pega el siguiente c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-apacheconf\">&lt;IfModule mod_rewrite.c&gt;\n  RewriteEngine On\n  RewriteRule ^(.*)$ public\/$1 [L]\n&lt;\/IfModule&gt;<\/code><\/pre>\n<ol start=\"3\">\n<li>Crea un nuevo repositorio Git y env\u00eda tu c\u00f3digo a \u00e9l (Kinsta soporta el env\u00edo desde GitHub, GitLab y Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Accede a tu cuenta Kinsta o crea una nueva. Una vez en tu <a href=\"https:\/\/my.kinsta.com\/?lang=es\">Panel MyKinsta<\/a>, haz clic en el bot\u00f3n <strong>A\u00f1adir servicio<\/strong>, luego selecciona <strong>Aplicaci\u00f3n<\/strong>, como en la captura de pantalla de abajo.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-mykinsta-create-app.png\" alt=\"A\u00f1adir una aplicaci\u00f3n en MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">A\u00f1adir una aplicaci\u00f3n en MyKinsta<\/figcaption><\/figure>\n<p>MyKinsta te pedir\u00e1 que conectes tu cuenta Git. Completa la autorizaci\u00f3n tal y como se te pide, luego selecciona el proyecto que has enviado previamente a tu repositorio y la rama que quieres utilizar.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-app-details-mykinsta.jpg\" alt=\"Configurar los detalles de la nueva aplicaci\u00f3n en Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Configurar los detalles de la nueva aplicaci\u00f3n en Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>A\u00f1ade tu Laravel <code>APP_KEY<\/code> en la secci\u00f3n <strong>Variables de entorno<\/strong>. La clave est\u00e1 en el archivo <strong>.env<\/strong> de tu directorio local del proyecto.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-env-variables-mykinsta.png\" alt=\"Configurar las variables de entorno de la aplicaci\u00f3n en Kinsta\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Configurar las variables de entorno de la aplicaci\u00f3n en Kinsta<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Haz clic en <strong>Continuar<\/strong> y selecciona el entorno de construcci\u00f3n seg\u00fan tus preferencias.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Por ahora, deja en blanco el comando de inicio en la secci\u00f3n <strong>Recursos<\/strong> y, a continuaci\u00f3n, haz clic en <strong>Continuar<\/strong> para proseguir.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Por \u00faltimo, completa la informaci\u00f3n de pago. El despliegue se inicia inmediatamente.<\/li>\n<\/ol>\n<p>Necesitas dos paquetes de construcci\u00f3n para ejecutar correctamente tu aplicaci\u00f3n: PHP para ejecutar los comandos de <code>php<\/code>, y Node.js, para ejecutar los comandos de <code>npm<\/code>. Para ello:<\/p>\n<ol start=\"9\">\n<li>Ve a tu aplicaci\u00f3n y, en la parte izquierda de la navegaci\u00f3n, haz clic en <strong>Configuraci\u00f3n.<\/strong><\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Haz clic en <strong>A\u00f1adir buildpack<\/strong> y a\u00f1ade los paquetes de construcci\u00f3n para Node.js y PHP. Sin embargo, aseg\u00farate de que el paquete de construcci\u00f3n de PHP se <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">a\u00f1ade el \u00faltimo<\/a> de la secuencia, ya que se trata de una aplicaci\u00f3n basada en PHP.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Haz clic en el bot\u00f3n <strong>Desplegar Ahora<\/strong> que aparece despu\u00e9s de a\u00f1adir los nuevos paquetes de construcci\u00f3n, como se muestra en la imagen siguiente.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-buildpacks-node-php.jpg\" alt=\"Despliega la aplicaci\u00f3n despu\u00e9s de a\u00f1adir el buildpack en Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">Despliega la aplicaci\u00f3n despu\u00e9s de a\u00f1adir el buildpack en Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Por \u00faltimo, ve a la pesta\u00f1a <strong>Procesos<\/strong> de tu aplicaci\u00f3n, edita el proceso Web predeterminado y sustituye su <strong>comando de Inicio<\/strong>\u00a0por lo siguiente:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run build && heroku-php-apache2<\/code><\/pre>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-webprocess-details.jpg\" alt=\"Actualizar el comando de inicio del proceso en Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Actualizar el comando de inicio del proceso en Kinsta<\/figcaption><\/figure>\n<p>Tras actualizar el comando de inicio, tu aplicaci\u00f3n se volver\u00e1 a desplegar autom\u00e1ticamente con el nuevo comando. Una vez que el despliegue se haya realizado correctamente, podr\u00e1s visitar el dominio para ver el espectacular componente de tarjeta que has creado y empezar a probar y desarrollar tu aplicaci\u00f3n.<\/p>\n<h2>Resumen<\/h2>\n<p>Tailwind ayuda a elevar tu proyecto Laravel de simplemente b\u00e1sico a absolutamente impresionante. Es f\u00e1cil de usar, lo que le ahorra escribir montones masivos de c\u00f3digo s\u00f3lo para obtener la apariencia que deseas.<\/p>\n<p>Ahora que sabes lo b\u00e1sico, explora las capacidades de <a href=\"https:\/\/kinsta.com\/es\/blog\/tailwind-css\/\">Tailwind<\/a> para mejorar el aspecto de tu aplicaci\u00f3n con fuentes fant\u00e1sticas y efectos fascinantes. Despu\u00e9s, <a href=\"https:\/\/my.kinsta.com\/login?lang=es\" target=\"_blank\" rel=\"noopener noreferrer\">despli\u00e9gala utilizando MyKinsta<\/a> para que el mundo tambi\u00e9n disfrute de tu aplicaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A todo sitio web Laravel le vendr\u00eda bien algo de estilo, y Tailwind CSS es la forma m\u00e1s sencilla de darle un toque a tu sitio. &#8230;<\/p>\n","protected":false},"author":290,"featured_media":68917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1303],"class_list":["post-68916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-laravel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel<\/title>\n<meta name=\"description\" content=\"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel\" \/>\n<meta property=\"og:description\" content=\"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:30:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T15:39:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel\",\"datePublished\":\"2023-08-07T16:30:57+00:00\",\"dateModified\":\"2023-08-23T15:39:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\"},\"wordCount\":1387,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\",\"name\":\"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:30:57+00:00\",\"dateModified\":\"2023-08-23T15:39:22+00:00\",\"description\":\"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel","description":"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel","og_description":"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.","og_url":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-08-07T16:30:57+00:00","article_modified_time":"2023-08-23T15:39:22+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Marcia Ramos","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel","datePublished":"2023-08-07T16:30:57+00:00","dateModified":"2023-08-23T15:39:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/"},"wordCount":1387,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/","url":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/","name":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:30:57+00:00","dateModified":"2023-08-23T15:39:22+00:00","description":"Este art\u00edculo pr\u00e1ctico explora c\u00f3mo usar Tailwind CSS para darle vida a tu proyecto Laravel, y luego desplegarlo usando MyKinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/laravel-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/es\/secciones\/laravel\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Hacer P\u00e1ginas Bonitas Usando Tailwind CSS y Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/es\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=68916"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68916\/revisions"}],"predecessor-version":[{"id":69045,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68916\/revisions\/69045"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68916\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/68917"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=68916"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=68916"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=68916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}