Como instalar o Tailwindcss em um projeto Laravel?

Blade e Tailwindcss, na minha humilde opinião, é uma poderosa combinação para construção dos seus componentes web. Neste tutorial, vamos aprender a instalar e configurar o Tailwindcss na sua aplicação Laravel.

Instalando e configurando o Tailwindcss

O primeiro passo é instalar o Tailwindcss e suas dependências. Você pode fazer isso através dos comandos yarn ou npm.

Exemplo:

yarn add -D tailwindcss postcss autoprefixer

npm i -D tailwindcss postcss autoprefixer

Crie o arquivo de configuração

Em seguida, crie o arquivo de configuração do Tailwind através do seguinte comando.

yarn tailwindcss init

Ou:

npx tailwindcss init

Esse comando vai criar um arquivo chamado tailwind.config.js.

Includa o Tailwind no Laravel Mix.

Agora, você deve incluir o tailwindcss em seu script webpack.mix.js. Você pode fazer isso de maneira simples, simplesmente acrescentando um trecho ao seu código:

mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"), // essa linha
]);

Configurando os arquivos que usarão as classes do Tailwindcss

Agora, vamos configurar quais os arquivos do projeto o Tailwindcss vai buscar as classes utilizadas para gerar o CSS para seus templates. Isso é feito incluindo uma lista de padrões de caminhos para arquivos na seção content. Esta seção do script tailwind.config. é onde você configura os caminhos para todos os seus modelos HTML, componentes JavaScript e quaisquer outros arquivos de origem que contenham classes do Tailwindcss.

No nosso caso, vamos incluir os caminhos mais comuns que poderão utilizar as classes do Tailwindcss no seu projeto Laravel.

Exemplo:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configurando as diretivas do Tailwindcss

Adicione as diretivas @tailwind para cada uma das camadas da tailwind em seu arquivo ./resources/css/app.css.

Exemplo:

@tailwind base;
@tailwind components;
@tailwind utilities;

Agora, é necessário que você execute o mix watch para sua gerar seu arquivo CSS enquanto desenvolve.

Finalmente, executando o mix watch

Execute:

yarn mix watch

npm run watch

Agora, basta incluir o arquivo css/app.css gerado pelo mix watch, para começar utilizar o Tailwindcss em sua aplicação Laravel.

Exemplo:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{!! asset('css/app.css') !!}" rel="stylesheet">
</head>
<body>
  <h1 class="text-5xl font-bold underline">
    Olá, mundo!
  </h1>
</body>
</html>

Agora, basta executar o php artisan serve e testar o Tailwindcss!