Andrei Cimpoeru | Desarrollador Backend

El dolor de cabeza del Frontend en Spring Boot

Si estás desarrollando una aplicación Spring Boot y quieres usar Tailwind CSS, la historia de siempre es:

Instalar Node.js y npm.
Mantener un package.json junto a tu pom.xml.
Configurar un flujo de compilación paralelo.
Pelear con conflictos entre los comandos de Maven y npm.

¿Tedioso, verdad? Especialmente si solo quieres escribir Java y HTML.

Aquí es donde entra el Maven Tailwind Plugin. Te permite compilar Tailwind CSS v4 directamente desde Maven utilizando el CLI independiente de Tailwind. Sin Node.js, sin npm, solo la tranquilidad del ecosistema Java.

Aquí tienes una guía paso a paso sobre cómo integrarlo usando Thymeleaf y JTE.

Paso 1: Añadir el Maven Tailwind Plugin

Añade el plugin a la sección <plugins> de tu pom.xml:

<build>
    <plugins>
        <plugin>
            <groupId>io.github.4ndreidev</groupId>
            <artifactId>tailwind-maven-plugin</artifactId>
            <version>1.1.0</version>
            <executions>
                <execution>
                    <goals>
                        <goal>compile</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

Paso 2: Inicializar Tailwind

Abre tu terminal y ejecuta:

mvn tailwind:init

Esto crea automáticamente:

📁 src/main/resources/static/css/
📄 input.css con los imports de Tailwind v4 (@import "tailwindcss";)

Paso 3: Crear tus Plantillas (Templates)

Ahora vamos a crear nuestras vistas. Te mostraré cómo hacerlo tanto con Thymeleaf como con JTE. Ten en cuenta que el CSS compilado estará disponible en la ruta /tailwind.css.

Opción A: Usando Thymeleaf

Crea 📄 src/main/resources/templates/index.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ⚡ IMPORTANTE: Link al CSS compilado por Maven Tailwind Plugin -->
    <link rel="stylesheet" th:href="@{/tailwind.css}">
    
    <title>Spring Boot + Tailwind + Thymeleaf</title>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
    <div class="p-8 bg-white rounded-xl shadow-lg border border-slate-200">
        <h1 class="text-3xl font-extrabold text-blue-600 mb-2">¡Hola, Thymeleaf!</h1>
        <p class="text-slate-600">Tailwind CSS v4 compilado enteramente por Maven.</p>
    </div>
</body>
</html>

Opción B: Usando JTE

Crea 📄 src/main/jte/index.jte:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ⚡ IMPORTANTE: Link al CSS compilado por Maven Tailwind Plugin -->
    <link rel="stylesheet" href="/tailwind.css">
    
    <title>Spring Boot + Tailwind + JTE</title>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
    <div class="p-8 bg-white rounded-xl shadow-lg border border-slate-200">
        <h1 class="text-3xl font-extrabold text-blue-600 mb-2">¡Hola, JTE!</h1>
        <p class="text-slate-600">Plantillas ultrarrápidas con JTE y Tailwind CSS.</p>
    </div>
</body>
</html>

Paso 4: Crear el Controlador

Ahora necesitamos un controlador de Spring Boot para servir nuestras plantillas. El código es el mismo tanto para Thymeleaf como para JTE.

Crea 📄 src/main/java/com/tuempresa/controller/HomeController.java:

package com.tuempresa.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index() {
        return "index"; // Retorna index.html (Thymeleaf) o index.jte (JTE)
    }
}

Paso 5: ¡Ejecutar y observar (Watch Mode)!

Para ejecutar tu aplicación, abre una terminal y arranca Spring Boot:

mvn spring-boot:run

Para habilitar la recarga en caliente (hot-reloading) de tu CSS mientras editas tus archivos HTML o JTE, abre una segunda ventana de terminal y ejecuta:

mvn tailwind:watch

¡Y eso es todo! Cada vez que añadas una nueva clase de Tailwind a tus archivos Thymeleaf o JTE, el plugin recompilará el CSS al instante. Cero Node.js, cero configuraciones complejas. Solo código.

Cómo usar Tailwind CSS v4 con Spring Boot (Sin Node.js)