{"id":61875,"date":"2023-08-07T13:26:19","date_gmt":"2023-08-07T16:26:19","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=61875&#038;preview=true&#038;preview_id=61875"},"modified":"2023-08-22T03:39:23","modified_gmt":"2023-08-22T06:39:23","slug":"laravel-tailwind","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/","title":{"rendered":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel"},"content":{"rendered":"<p>Todo site do Laravel pode ter algum estilo, e o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tailwind-css\/\">Tailwind CSS \u00e9 a maneira mais f\u00e1cil de dar um toque especial ao seu site<\/a>. Essa estrutura CSS que prioriza a utilidade oferece classes predefinidas para voc\u00ea estilizar seus elementos HTML. Em vez de escrever um c\u00f3digo CSS intermin\u00e1vel, voc\u00ea pode criar p\u00e1ginas da web personalizadas rapidamente e, em seguida, manter e dimensionar facilmente suas folhas de estilo (style sheet).<\/p>\n<p>O Tailwind faz parte da <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">pilha TALL<\/a>, juntamente com o Alpine.js e o Livewire. A comunidade Laravel criou essa solu\u00e7\u00e3o de desenvolvimento full-stack para ajudar os desenvolvedores de todos os n\u00edveis de habilidade a criar rapidamente prot\u00f3tipos de aplicativos da web. Essas solu\u00e7\u00f5es s\u00e3o f\u00e1ceis de usar, sem necessidade de conhecimento profundo de tecnologias de frontend ou backend.<\/p>\n<p>Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o 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>Aprimore seu projeto Laravel usando o Tailwind<\/h2>\n<p>Para come\u00e7ar, crie uma p\u00e1gina b\u00e1sica do Laravel e use o Tailwind CSS para dar estilo a ela com o m\u00ednimo de esfor\u00e7o.<\/p>\n<h3>Pr\u00e9-requisitos<\/h3>\n<p>Para acompanhar o tutorial, voc\u00ea precisa de:<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> e <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> e npm instalados.<\/li>\n<li>Conta <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> para implanta\u00e7\u00e3o. Se voc\u00ea ainda n\u00e3o tiver uma conta, inscreva-se <a href=\"https:\/\/kinsta.com\/pt\/inscreva-se\/?product_type=app-db\">para uma avalia\u00e7\u00e3o gratuita<\/a>.<\/li>\n<\/ul>\n<p>Para ver o projeto final, confira o <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">c\u00f3digo completo do projeto<\/a>.<\/p>\n<h2>Projeto Laravel e configura\u00e7\u00e3o do Tailwind<\/h2>\n<p>Para criar um novo projeto Laravel usando o Composer, voc\u00ea deve criar um novo projeto Laravel:<\/p>\n<ol start=\"1\">\n<li>Abra o terminal no diret\u00f3rio em que voc\u00ea deseja que o projeto fique e seja executado:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>V\u00e1 at\u00e9 o diret\u00f3rio <strong>my-project<\/strong> para instalar os pacotes necess\u00e1rios:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Instale os pacotes para trabalhar com o Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>Execute o seguinte comando para configurar os arquivos de configura\u00e7\u00e3o do Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Essa a\u00e7\u00e3o coloca dois arquivos na raiz do seu projeto: <strong>tailwind.config.js<\/strong> e <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Configurar os caminhos dos templates<\/h2>\n<ol start=\"1\">\n<li>Em seguida, configure os caminhos de templates no arquivo <strong>tailwind.config.js<\/strong>. Por padr\u00e3o, o Laravel procura arquivos CSS no diret\u00f3rio p\u00fablico. O caminho do template informa ao Laravel onde encontrar os arquivos CSS do aplicativo.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Substitua o c\u00f3digo no arquivo <strong>tailwind.config.js<\/strong> por este:<\/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>Adicione as diretivas CSS do Tailwind ao CSS do projeto<\/h2>\n<ol start=\"1\">\n<li>Para adicionar as diretivas do Tailwind CSS, v\u00e1 para a pasta <strong>resources\/css<\/strong> e abra o arquivo <strong>app.css<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Em seguida, adicione o seguinte c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>Crie o aplicativo<\/h2>\n<p>Antes de executar seu aplicativo localmente:<\/p>\n<ol start=\"1\">\n<li>Inicie o servidor de desenvolvimento do Vite:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Esse comando agrupa seu arquivo de ativos est\u00e1ticos, incluindo o Tailwind CSS, e inicia o servidor local do Vite.<\/p>\n<ol start=\"2\">\n<li>Use o Artisan para executar seu aplicativo Laravel:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Agora, seu aplicativo deve estar em execu\u00e7\u00e3o em <code>http:\/\/127.0.0.1:8000\/<\/code>. Ele exibe a sa\u00edda padr\u00e3o de um aplicativo Laravel rec\u00e9m-criado.<\/p>\n<p>Ao abrir o arquivo de visualiza\u00e7\u00e3o de rota: <strong>resources\/views\/welcome.blade.php<\/strong>, voc\u00ea pode ver que ele j\u00e1 usa as classes de utilit\u00e1rio do Tailwind.<\/p>\n<h2>Como criar um componente simples do Tailwind<\/h2>\n<p>Para que voc\u00ea entenda melhor como o Tailwind funciona:<\/p>\n<ol start=\"1\">\n<li>Abra <strong>resources\/views\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Exclua o c\u00f3digo da visualiza\u00e7\u00e3o de boas-vindas do aplicativo.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Substitua pelo c\u00f3digo abaixo, que renderiza um belo componente de cart\u00e3o:<\/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>O c\u00f3digo acima usa o Vite para importar o arquivo <strong>app.css<\/strong> via <code>@vite('resources\/css\/app.css')<\/code>. Ele tamb\u00e9m importa o Tailwind. Ele cria um componente de marca\u00e7\u00e3o fundamental para simular um cart\u00e3o de blog usando essas classes de utilit\u00e1rio CSS do Tailwind:<\/p>\n<ul>\n<li><code>max-w-sm<\/code> &#8211; Define a largura m\u00e1xima do cont\u00eainer como o tamanho do breakpoint sm (pequeno).<\/li>\n<li><code>m-24<\/code> &#8211; Adiciona uma margem de 24 unidades (96px ou 6rem) a todos os lados do cont\u00eainer.<\/li>\n<li><code>rounded<\/code> &#8211; Adiciona um border-radius para tornar os cantos do cont\u00eainer arredondados.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Oculta qualquer conte\u00fado que ultrapasse o cont\u00eainer.<\/li>\n<li><code>shadow-lg<\/code> &#8211; Adiciona um efeito de sombra ao cont\u00eainer.<\/li>\n<li><code>w-full<\/code> &#8211; Define a largura da imagem como 100% do seu cont\u00eainer.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; Adiciona preenchimento de 6 unidades (24px ou 1,5rem) no eixo x e 4 unidades (16px ou 1rem) no eixo y.<\/li>\n<li><code>font-bold<\/code> &#8211; Define o peso da fonte do texto como negrito.<\/li>\n<li><code>text-xl<\/code> &#8211; Define o tamanho da fonte do texto como extragrande.<\/li>\n<li><code>mb-2<\/code> &#8211; Adiciona uma margem inferior de 2 unidades (0,5 px ou 8 px) ao elemento.<\/li>\n<li><code>text-gray-600<\/code> &#8211; Define a cor do texto como cinza-escuro.<\/li>\n<li><code>text-base<\/code> &#8211; Define o tamanho da fonte do texto como padr\u00e3o.<\/li>\n<\/ul>\n<p>Ao visualizar o aplicativo no navegador, voc\u00ea ver\u00e1 um resultado semelhante ao mostrado abaixo.<\/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=\"Exemplo de componente em uma p\u00e1gina da web.\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Exemplo de componente em uma p\u00e1gina da web.<\/figcaption><\/figure>\n<h2>Implante seu projeto Laravel Tailwind na Kinsta<\/h2>\n<p>Antes de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">implantar e hospedar seu aplicativo Laravel<\/a> usando a Kinsta, fa\u00e7a mais algumas altera\u00e7\u00f5es para garantir que ele funcione corretamente quando hospedado.<\/p>\n<ol start=\"1\">\n<li>Abra o arquivo <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. Altere o valor de <code>protected $proxies<\/code> para permitir que seu aplicativo Laravel confie em todos os proxies:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Crie um novo arquivo <strong>.htaccess<\/strong> no diret\u00f3rio raiz do seu projeto e cole o seguinte 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>Crie um novo reposit\u00f3rio Git e envie seu c\u00f3digo para ele (a Kinsta \u00e9 compat\u00edvel com envio a partir do GitHub, GitLab e Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Fa\u00e7a login em sua conta Kinsta ou crie uma nova. Uma vez em seu <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">painel MyKinsta<\/a>, clique no bot\u00e3o <strong>Adicionar servi\u00e7o<\/strong> e selecione <strong>Aplicativo<\/strong>, como na captura de tela abaixo.<\/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=\"Adicionando um aplicativo no MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">Adicionando um aplicativo no MyKinsta<\/figcaption><\/figure>\n<p>O MyKinsta solicita que voc\u00ea conecte sua conta Git. Preencha a autoriza\u00e7\u00e3o conforme solicitado e, em seguida, selecione o projeto que voc\u00ea enviou anteriormente para o seu reposit\u00f3rio e a branch\u00a0que deseja usar.<\/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=\"Configurando os detalhes do novo aplicativo na Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Configurando os detalhes do novo aplicativo na Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>Adicione seu Laravel <code>APP_KEY<\/code> na se\u00e7\u00e3o <strong>Vari\u00e1veis de ambiente<\/strong>. A chave est\u00e1 no arquivo <strong>.env<\/strong> do diret\u00f3rio do projeto local.<\/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=\"Configurando as vari\u00e1veis de ambiente do aplicativo na Kinsta\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Configurando as vari\u00e1veis de ambiente do aplicativo na Kinsta<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Clique em <strong>Continue<\/strong> e selecione o ambiente de build de acordo com suas prefer\u00eancias.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Deixe o comando start na se\u00e7\u00e3o <strong>Recursos<\/strong> em branco por enquanto e clique em <strong>Continue<\/strong> para prosseguir.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Por fim, preencha as informa\u00e7\u00f5es de pagamento. A implanta\u00e7\u00e3o come\u00e7ar\u00e1 imediatamente.<\/li>\n<\/ol>\n<p>Voc\u00ea precisa de dois buildpacks para executar seu aplicativo corretamente: PHP, para executar os comandos <code>php<\/code>, e Node.js, para executar os comandos <code>npm<\/code>. Para isso, voc\u00ea precisa de dois buildpacks:<\/p>\n<ol start=\"9\">\n<li>Acesse seu aplicativo e, na navega\u00e7\u00e3o do lado esquerdo, clique em <strong>Configura\u00e7\u00f5es.<\/strong><\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Clique em <strong>Adicionar buildpack<\/strong> e adicione os buildpacks para Node.js e PHP. No entanto, certifique-se de que o buildpack do PHP seja <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">adicionado por \u00faltimo<\/a> na sequ\u00eancia, pois este \u00e9 um aplicativo baseado em PHP.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Clique no bot\u00e3o <strong>Implantar agora<\/strong> que aparece ap\u00f3s adicionar os novos buildpacks, conforme ilustrado na imagem abaixo.<\/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=\"Implantar aplicativo ap\u00f3s adicionar o buildpack na Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">Implantar aplicativo ap\u00f3s adicionar o buildpack na Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Por fim, v\u00e1 para a aba <strong>Processos<\/strong> do seu aplicativo, edite o processo padr\u00e3o da web e substitua o <b>Comando Start<\/b>\u00a0pelo seguinte:<\/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=\"Atualizando o Comando start do processo na Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Atualizando o Comando start do processo na Kinsta<\/figcaption><\/figure>\n<p>Depois de atualizar o comando start, seu aplicativo ser\u00e1 reimplantado automaticamente com o novo comando. Quando a implanta\u00e7\u00e3o for bem-sucedida, voc\u00ea poder\u00e1 visitar o dom\u00ednio para ver o belo componente de cart\u00e3o que criou e come\u00e7ar a testar e desenvolver seu aplicativo.<\/p>\n<h2>Resumo<\/h2>\n<p>O Tailwind ajuda voc\u00ea a elevar seu projeto Laravel de b\u00e1sico a perfeitamente impressionante. Ele \u00e9 f\u00e1cil de usar, evitando que voc\u00ea digite pilhas enormes de c\u00f3digo apenas para obter a apar\u00eancia desejada.<\/p>\n<p>Agora que voc\u00ea conhece os conceitos b\u00e1sicos, explore os <a href=\"https:\/\/kinsta.com\/pt\/blog\/tailwind-css\/\">recursos do Tailwind<\/a> para aprimorar a apar\u00eancia do seu aplicativo com fontes sofisticadas e efeitos encantadores. Em seguida, <a href=\"https:\/\/my.kinsta.com\/login?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">implemente usando o MyKinsta<\/a> para que o mundo tamb\u00e9m aproveite seu aplicativo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Todo site do Laravel pode ter algum estilo, e o Tailwind CSS \u00e9 a maneira mais f\u00e1cil de dar um toque especial ao seu site. Essa &#8230;<\/p>\n","protected":false},"author":290,"featured_media":61876,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[984],"class_list":["post-61875","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>Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel<\/title>\n<meta name=\"description\" content=\"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o 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\/pt\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel\" \/>\n<meta property=\"og:description\" content=\"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:26:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T06:39:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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 artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/laravel-tailwind\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel\",\"datePublished\":\"2023-08-07T16:26:19+00:00\",\"dateModified\":\"2023-08-22T06:39:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\"},\"wordCount\":1350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\",\"name\":\"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:26:19+00:00\",\"dateModified\":\"2023-08-22T06:39:23+00:00\",\"description\":\"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel","description":"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o 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\/pt\/blog\/laravel-tailwind\/","og_locale":"pt_PT","og_type":"article","og_title":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel","og_description":"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.","og_url":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-08-07T16:26:19+00:00","article_modified_time":"2023-08-22T06:39:23+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Marcia Ramos","Tempo estimado de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel","datePublished":"2023-08-07T16:26:19+00:00","dateModified":"2023-08-22T06:39:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/"},"wordCount":1350,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/","url":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/","name":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:26:19+00:00","dateModified":"2023-08-22T06:39:23+00:00","description":"Este artigo pr\u00e1tico explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implant\u00e1-lo usando o MyKinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/laravel-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/pt\/topicos\/laravel\/"},{"@type":"ListItem","position":3,"name":"Criando P\u00e1ginas Impactantes com Tailwind CSS e Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=61875"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61875\/revisions"}],"predecessor-version":[{"id":62098,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61875\/revisions\/62098"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61875\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/61876"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=61875"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=61875"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=61875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}