Todo site do Laravel pode ter algum estilo, e o Tailwind CSS é a maneira mais fácil de dar um toque especial ao seu site. Essa estrutura CSS que prioriza a utilidade oferece classes predefinidas para você estilizar seus elementos HTML. Em vez de escrever um código CSS interminável, você pode criar páginas da web personalizadas rapidamente e, em seguida, manter e dimensionar facilmente suas folhas de estilo (style sheet).

O Tailwind faz parte da pilha TALL, juntamente com o Alpine.js e o Livewire. A comunidade Laravel criou essa solução de desenvolvimento full-stack para ajudar os desenvolvedores de todos os níveis de habilidade a criar rapidamente protótipos de aplicativos da web. Essas soluções são fáceis de usar, sem necessidade de conhecimento profundo de tecnologias de frontend ou backend.

Este artigo prático explora como usar o Tailwind CSS para incrementar seu projeto Laravel e, em seguida, implantá-lo usando o MyKinsta.

Aprimore seu projeto Laravel usando o Tailwind

Para começar, crie uma página básica do Laravel e use o Tailwind CSS para dar estilo a ela com o mínimo de esforço.

Pré-requisitos

Para acompanhar o tutorial, você precisa de:

Para ver o projeto final, confira o código completo do projeto.

Projeto Laravel e configuração do Tailwind

Para criar um novo projeto Laravel usando o Composer, você deve criar um novo projeto Laravel:

  1. Abra o terminal no diretório em que você deseja que o projeto fique e seja executado:
composer create-project laravel/laravel my-project
  1. Vá até o diretório my-project para instalar os pacotes necessários:
cd my-project
  1. Instale os pacotes para trabalhar com o Tailwind:
npm install -D tailwindcss postcss autoprefixer
  1. Execute o seguinte comando para configurar os arquivos de configuração do Tailwind:
npx tailwindcss init -p

Essa ação coloca dois arquivos na raiz do seu projeto: tailwind.config.js e postcss.config.js.

Configurar os caminhos dos templates

  1. Em seguida, configure os caminhos de templates no arquivo tailwind.config.js. Por padrão, o Laravel procura arquivos CSS no diretório público. O caminho do template informa ao Laravel onde encontrar os arquivos CSS do aplicativo.
  1. Substitua o código no arquivo tailwind.config.js por este:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Adicione as diretivas CSS do Tailwind ao CSS do projeto

  1. Para adicionar as diretivas do Tailwind CSS, vá para a pasta resources/css e abra o arquivo app.css.
  1. Em seguida, adicione o seguinte código:
@tailwind base;
@tailwind components;
@tailwind utilities;

Crie o aplicativo

Antes de executar seu aplicativo localmente:

  1. Inicie o servidor de desenvolvimento do Vite:
npm run dev

Esse comando agrupa seu arquivo de ativos estáticos, incluindo o Tailwind CSS, e inicia o servidor local do Vite.

  1. Use o Artisan para executar seu aplicativo Laravel:
php artisan serve

Agora, seu aplicativo deve estar em execução em http://127.0.0.1:8000/. Ele exibe a saída padrão de um aplicativo Laravel recém-criado.

Ao abrir o arquivo de visualização de rota: resources/views/welcome.blade.php, você pode ver que ele já usa as classes de utilitário do Tailwind.

Como criar um componente simples do Tailwind

Para que você entenda melhor como o Tailwind funciona:

  1. Abra resources/views/welcome.blade.php.
  1. Exclua o código da visualização de boas-vindas do aplicativo.
  1. Substitua pelo código abaixo, que renderiza um belo componente de cartão:
<!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>

O código acima usa o Vite para importar o arquivo app.css via @vite('resources/css/app.css'). Ele também importa o Tailwind. Ele cria um componente de marcação fundamental para simular um cartão de blog usando essas classes de utilitário CSS do Tailwind:

  • max-w-sm – Define a largura máxima do contêiner como o tamanho do breakpoint sm (pequeno).
  • m-24 – Adiciona uma margem de 24 unidades (96px ou 6rem) a todos os lados do contêiner.
  • rounded – Adiciona um border-radius para tornar os cantos do contêiner arredondados.
  • overflow-hidden – Oculta qualquer conteúdo que ultrapasse o contêiner.
  • shadow-lg – Adiciona um efeito de sombra ao contêiner.
  • w-full – Define a largura da imagem como 100% do seu contêiner.
  • px-6 py-4 – Adiciona preenchimento de 6 unidades (24px ou 1,5rem) no eixo x e 4 unidades (16px ou 1rem) no eixo y.
  • font-bold – Define o peso da fonte do texto como negrito.
  • text-xl – Define o tamanho da fonte do texto como extragrande.
  • mb-2 – Adiciona uma margem inferior de 2 unidades (0,5 px ou 8 px) ao elemento.
  • text-gray-600 – Define a cor do texto como cinza-escuro.
  • text-base – Define o tamanho da fonte do texto como padrão.

Ao visualizar o aplicativo no navegador, você verá um resultado semelhante ao mostrado abaixo.

Exemplo de componente em uma página da web.
Exemplo de componente em uma página da web.

Implante seu projeto Laravel Tailwind na Kinsta

Antes de implantar e hospedar seu aplicativo Laravel usando a Kinsta, faça mais algumas alterações para garantir que ele funcione corretamente quando hospedado.

  1. Abra o arquivo app/Http/Middleware/TrustProxies.php. Altere o valor de protected $proxies para permitir que seu aplicativo Laravel confie em todos os proxies:
protected $proxies = '*';
  1. Crie um novo arquivo .htaccess no diretório raiz do seu projeto e cole o seguinte código:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Crie um novo repositório Git e envie seu código para ele (a Kinsta é compatível com envio a partir do GitHub, GitLab e Bitbucket).
  1. Faça login em sua conta Kinsta ou crie uma nova. Uma vez em seu painel MyKinsta, clique no botão Adicionar serviço e selecione Aplicativo, como na captura de tela abaixo.
Adicionando um aplicativo no MyKinsta
Adicionando um aplicativo no MyKinsta

O MyKinsta solicita que você conecte sua conta Git. Preencha a autorização conforme solicitado e, em seguida, selecione o projeto que você enviou anteriormente para o seu repositório e a branch que deseja usar.

Configurando os detalhes do novo aplicativo na Kinsta
Configurando os detalhes do novo aplicativo na Kinsta
  1. Adicione seu Laravel APP_KEY na seção Variáveis de ambiente. A chave está no arquivo .env do diretório do projeto local.
Configurando as variáveis de ambiente do aplicativo na Kinsta
Configurando as variáveis de ambiente do aplicativo na Kinsta
  1. Clique em Continue e selecione o ambiente de build de acordo com suas preferências.
  1. Deixe o comando start na seção Recursos em branco por enquanto e clique em Continue para prosseguir.
  1. Por fim, preencha as informações de pagamento. A implantação começará imediatamente.

Você precisa de dois buildpacks para executar seu aplicativo corretamente: PHP, para executar os comandos php, e Node.js, para executar os comandos npm. Para isso, você precisa de dois buildpacks:

  1. Acesse seu aplicativo e, na navegação do lado esquerdo, clique em Configurações.
  1. Clique em Adicionar buildpack e adicione os buildpacks para Node.js e PHP. No entanto, certifique-se de que o buildpack do PHP seja adicionado por último na sequência, pois este é um aplicativo baseado em PHP.
  1. Clique no botão Implantar agora que aparece após adicionar os novos buildpacks, conforme ilustrado na imagem abaixo.
Implantar aplicativo após adicionar o buildpack na Kinsta
Implantar aplicativo após adicionar o buildpack na Kinsta
  1. Por fim, vá para a aba Processos do seu aplicativo, edite o processo padrão da web e substitua o Comando Start pelo seguinte:
npm run build && heroku-php-apache2
Atualizando o Comando start do processo na Kinsta
Atualizando o Comando start do processo na Kinsta

Depois de atualizar o comando start, seu aplicativo será reimplantado automaticamente com o novo comando. Quando a implantação for bem-sucedida, você poderá visitar o domínio para ver o belo componente de cartão que criou e começar a testar e desenvolver seu aplicativo.

Resumo

O Tailwind ajuda você a elevar seu projeto Laravel de básico a perfeitamente impressionante. Ele é fácil de usar, evitando que você digite pilhas enormes de código apenas para obter a aparência desejada.

Agora que você conhece os conceitos básicos, explore os recursos do Tailwind para aprimorar a aparência do seu aplicativo com fontes sofisticadas e efeitos encantadores. Em seguida, implemente usando o MyKinsta para que o mundo também aproveite seu aplicativo.

Marcia Ramos Kinsta

Sou o líder da equipe editorial na Kinsta. Sou um entusiasta de código aberto e adoro programar. Com mais de 7 anos de experiência em redação e edição técnica para a indústria de tecnologia, adoro colaborar com pessoas para criar conteúdos claros e concisos e melhorar fluxos de trabalho.