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:
- Laravel e Composer instalados.
- Node.js e npm instalados.
- Conta MyKinsta para implantação. Se você ainda não tiver uma conta, inscreva-se para uma avaliação gratuita.
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:
- Abra o terminal no diretório em que você deseja que o projeto fique e seja executado:
composer create-project laravel/laravel my-project- Vá até o diretório my-project para instalar os pacotes necessários:
cd my-project- Instale os pacotes para trabalhar com o Tailwind:
npm install -D tailwindcss postcss autoprefixer- Execute o seguinte comando para configurar os arquivos de configuração do Tailwind:
npx tailwindcss init -pEssa ação coloca dois arquivos na raiz do seu projeto: tailwind.config.js e postcss.config.js.
Configurar os caminhos dos templates
- 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.
- 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
- Para adicionar as diretivas do Tailwind CSS, vá para a pasta resources/css e abra o arquivo app.css.
- Em seguida, adicione o seguinte código:
@tailwind base;
@tailwind components;
@tailwind utilities;
Crie o aplicativo
Antes de executar seu aplicativo localmente:
- Inicie o servidor de desenvolvimento do Vite:
npm run devEsse comando agrupa seu arquivo de ativos estáticos, incluindo o Tailwind CSS, e inicia o servidor local do Vite.
- Use o Artisan para executar seu aplicativo Laravel:
php artisan serveAgora, 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:
- Abra resources/views/welcome.blade.php.
- Exclua o código da visualização de boas-vindas do aplicativo.
- 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.
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.
- Abra o arquivo app/Http/Middleware/TrustProxies.php. Altere o valor de
protected $proxiespara permitir que seu aplicativo Laravel confie em todos os proxies:
protected $proxies = '*';- 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>- 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).
- 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.
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.
- Adicione seu Laravel
APP_KEYna seção Variáveis de ambiente. A chave está no arquivo .env do diretório do projeto local.
- Clique em Continue e selecione o ambiente de build de acordo com suas preferências.
- Deixe o comando start na seção Recursos em branco por enquanto e clique em Continue para prosseguir.
- 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:
- Acesse seu aplicativo e, na navegação do lado esquerdo, clique em Configurações.
- 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.
- Clique no botão Implantar agora que aparece após adicionar os novos buildpacks, conforme ilustrado na imagem abaixo.
- 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
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.
Deixe um comentário