Integrando o Tailwind CSS 4 com Spring Web

#Java
#Spring
#Thymeleaf
#Tailwind

Tailwind CSS é um framework utilitário para estilização de interfaces que vem ganhando cada vez mais espaço entre desenvolvedores front-end. Ao invés de escrever CSS personalizado, você usa classes utilitárias diretamente no HTML para controlar o layout, espaçamento, cores, tipografia e muito mais. Isso resulta em um desenvolvimento mais rápido, consistente e com menos context-switching entre HTML e CSS. Com a chegada da versão 4, o Tailwind traz melhorias de performance, novas funcionalidades e uma experiência ainda mais fluida para projetos modernos — inclusive quando integrado com stacks como Spring.

Você vai ver como é simples integrar o Tailwind CSS ao Spring e como aproveitar todo o poder do framework para criar páginas web estilosas de forma orgânica e descomplicada.

Para seguir este tutorial, você não precisa ser um expert, mas é importante ter conhecimentos básicos sobre como criar um projeto com Spring. Como o objetivo aqui não é ensinar do zero a configurar o Spring Boot, uma boa ideia é fazer um bootcamp na DIO — eles têm ótimos conteúdos sobre Spring Boot que podem te ajudar a começar com o pé direito.

No momento em que escrevo, estou usando o IntelliJ, mas sinta-se à vontade para usar a IDE com a qual você se sente mais confortável.

Então vamos lá!

Requisitos:

Node.js (versão LTS): https://nodejs.org/pt

1 - Dentro do diretório src do seu projeto, crie uma nova pasta com o nome que preferir — no meu caso, chamei de frontend

2 - Agora abra essa pasta no terminal e execute o comando:

npm init

Vai aparecer uma mensagem como essa, apenas confirme:

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.


See `npm help init` for definitive documentation on these fields
and exactly what they do.


Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.


Press ^C at any time to quit.
package name: (frontend)

Quando terminar um arquivo com o nome package.json será criado dentro da pasta.

Agora vamos instalar os pacotes do tailwind css.

Execute o seguinte comando no terminal:

npm install tailwindcss @tailwindcss/cli

Aguarde a conclusão da instalação. Em seguida, volte para o diretório frontend e crie uma nova pasta chamada src. Dentro dela, crie um arquivo chamado tailwindcss.style.css.

Abra esse arquivo e adicione as seguintes declarações para importar as dependências do tailwind:

@import "tailwindcss";

@source "../../../src/main/resources/templates";

O @source informa ao Tailwind quais diretórios ou arquivos ele deve escanear para gerar as classes CSS necessárias.

Depois de fazer essa pequena configuração, adicione duas entradas na seção scripts do seu package.json, como mostrado na imagem abaixo:

{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "tailwind:dev": "npx @tailwindcss/cli -i ./src/tailwindcss.style.css -o ../../src/main/resources/static/css/main.css --watch",
  "tailwind:build": "npx @tailwindcss/cli -i ./src/tailwindcss.style.css -o ../../src/main/resources/static/css/main.css"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
  "@tailwindcss/cli": "^4.1.7",
  "tailwindcss": "^4.1.7"
}
}

O script tailwind:dev inicia o Tailwind em modo de desenvolvimento e fica monitorando alterações na pasta template. Sempre que um arquivo compatível com Tailwind for criado, modificado ou removido, o Tailwind atualiza automaticamente o CSS de saída no arquivo em /resources/static/css/main.css.

Execute o comando:

npm run tailwind:dev

Quando você executar o script, o arquivo main.css será gerado automaticamente no diretório de destino.

Pronto! O Tailwind está integrado com sucesso. Agora é só adicionar o link para o main.css no seu HTML e começar a usar as classes.

Confira no exemplo a seguir:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" th:href="@{/css/main.css}" href="../static/css/main.css">
</head>
<body>
  <p class="font-bold p-4 text-2xl text-gray-900 bg-amber-600">HELLO WORLD TAILWIND</p>
</body>
</html>

Obrigado por acompanhar até aqui! Espero que esse passo a passo tenha te ajudado a integrar o Tailwind de forma simples e direta. Se tiver dúvidas, sugestões ou quiser compartilhar como usou no seu projeto, fique à vontade pra comentar. Bons códigos e até a próxima!