Logo ANDCIM
Logo de Tailwind CSS

Maven Tailwind Plugin - Tailwind CSS 4 en Spring Boot sin Node.js

Guía completa para integrar Tailwind CSS 4 de manera muy sencilla en proyectos Spring Boot usando Maven. Sin Node.js, sin npm, compilación automática en el build de Maven.

Andrei Cimpoeru Tutoriales

¿Por qué el integrar Tailwind CSS en Spring Boot es un dolor de cabeza?

Si estás desarrollando una aplicación Spring Boot y quieres usar Tailwind CSS, normalmente tienes que:

  • Instalar Node.js y npm
  • Mantener dependencias adicionales fuera de Maven
  • Configurar un workflow con múltiples herramientas
  • Resolver conflictos entre comandos de Maven y npm

¿Tedioso, verdad?

Solución: Maven Tailwind Plugin

Maven Tailwind Plugin resuelve esto de forma elegante. Te permite compilar Tailwind CSS v4 directamente desde Maven, sin necesidad de Node.js.

¿Qué lo hace especial?

  • Sin dependencias externas - No necesitas Node.js ni npm
  • Integración perfecta con Maven - La compilación ocurre automáticamente
  • Watch mode para desarrollo - Recompilación instantánea mientras trabajas
  • Optimizado para producción - Minificación automática
  • Decargas el binario una sola vez - Se cachea en tu sistema

Requisitos previos

  • Java 17+
  • Maven 3.6.0+
  • Conexión a Internet (solo la primera vez para descargar el binario)

Instalación rápida

Paso 1: Añadir el plugin a 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

mvn tailwind:init

Esto crea automáticamente:

  • Carpeta: src/main/resources/static/css/
  • Archivo: input.css con los imports de Tailwind CSS v4

Paso 3: Crear tu template HTML

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 -->
    <link rel="stylesheet" href="/tailwind.css">
    <title>Mi Aplicación Spring Boot</title>
</head>
<body>
    <div class="flex h-screen items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600">
        <h1 class="text-4xl font-bold text-white">¡Hola, Tailwind CSS!</h1>
    </div>
</body>
</html>

Paso 4: Ejecutar tu aplicación

mvn spring-boot:run

Visita http://localhost:8080 y verás tu página estilizada.

Paso 5: Desarrollo en tiempo real

En otra terminal, activa el modo watch:

mvn tailwind:watch

Ahora el CSS se recompila automáticamente cada vez que modificas tu HTML o añades clases de Tailwind.

Comandos disponibles

✅ Configuración inicial

Crea la estructura de directorios y el archivo input.css. Seguro ejecutar varias veces.

mvn tailwind:init

🔨 Compilación manual

Compila el CSS. Ejecuta automáticamente durante el build, pero útil para triggear manualmente.

mvn tailwind:compile

👀 Modo desarrollo

Monitorea cambios y recompila al instante. Ideales para desarrollo.

mvn tailwind:watch

Para deshabilitar minificación en watch:

mvn tailwind:watch -Dtailwind.minify=false

⬇️ Descargar binario

Descarga el binario de Tailwind para tu sistema operativo.

mvn tailwind:download

Forzar descarga (ignorar cache):

mvn tailwind:download -Dtailwind.forceDownload=true

Configuración personalizada

En pom.xml

<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>
    <configuration>
        <inputFile>${project.basedir}/src/main/resources/css/styles.css</inputFile>
        <outputFile>${project.build.outputDirectory}/css/tailwind.css</outputFile>
        <minify>true</minify>
        <version>v4.1.18</version>
    </configuration>
</plugin>

Desde línea de comandos

# Compilar con archivo HTML personalizado
mvn tailwind:compile -Dtailwind.inputFile=src/main/resources/css/custom.css

# Version específica de Tailwind
mvn tailwind:download -Dtailwind.version=v4.0.0

# Desminificado en desarrollo
mvn tailwind:watch -Dtailwind.minify=false

Parámetros de configuración

ParámetroOpción MavenValor por DefectoDescripción
inputFiletailwind.inputFilesrc/main/resources/static/css/input.cssRuta del archivo de entrada
outputFiletailwind.outputFiletarget/classes/static/tailwind.cssRuta del archivo compilado
minifytailwind.minifytrue (compile), false (watch)Minificar CSS
versiontailwind.versionv4.1.18Versión de Tailwind CSS
downloadDirectorytailwind.downloadDirectory~/.m2/tailwindcssDirectorio de caché
forceDownloadtailwind.forceDownloadfalseForzar descarga/ignorar caché

Estructura de directorios esperada

tu-proyecto/
├── pom.xml
├── src/
│   ├── main/
│   │   ├── resources/
│   │   │   ├── static/
│   │   │   │   └── css/
│   │   │   │       └── input.css          ← Archivo de entrada
│   │   │   └── templates/
│   │   │       └── index.html
│   │   └── java/
│   │       └── com/example/
│   │           └── Application.java
│   └── test/
└── target/
    └── classes/
        └── static/
            └── tailwind.css               ← Archivo compilado

Solución de problemas

Error: “Input file not found”

Problema: El plugin no encuentra input.css

Solución:

mkdir -p src/main/resources/static/css
echo "@import 'tailwindcss';" > src/main/resources/static/css/input.css

Error: “Binary download failed”

Problema: No puede descargar el binario de Tailwind

Solución:

  1. Verifica tu conexión a Internet
  2. Intenta con otra versión: mvn tailwind:download -Dtailwind.version=v4.0.0
  3. Fuerza la descarga: mvn tailwind:download -Dtailwind.forceDownload=true

El CSS compilado está vacío

Problema: El archivo tailwind.css no contiene estilos

Solución:

  1. Asegúrate que input.css tiene @import 'tailwindcss';
  2. Verifica que tienes clases de Tailwind en tu HTML
  3. En Tailwind CSS v4, tailwind.config.js es opcional

Limpieza de caché

El plugin almacena los binarios en caché en: ~/.m2/tailwindcss/

Para limpiar:

rm -rf ~/.m2/tailwindcss/
mvn tailwind:download -Dtailwind.forceDownload=true

Ciclo de vida de Maven

El plugin se integra automáticamente:

  • initialize phase: Descarga el binario (opcional)
  • generate-resources phase: Compila CSS automáticamente
  • manual: mvn tailwind:watch para desarrollo

Casos de uso ideales

  • Proyectos Spring Boot existentes
  • Equipos que usan Maven como herramienta primaria
  • Organizaciones con políticas de seguridad estrictas respecto a npm
  • Aplicaciones web completas (Thymeleaf, JTE)
  • Desarrolladores que prefieren un único tool (Maven)

Conclusión

El Maven Tailwind Plugin elimina la complejidad de integrar Tailwind CSS en aplicaciones Spring Boot. No necesitas aprender otra herramienta de build, no necesitas Node.js, solo Maven.

Ahora puedes desarrollar interfaces modernas con Tailwind CSS dentro de tu flujo de trabajo Maven habitual.

¿Listo para empezar? Descarga el plugin hoy mismo y simplifica tu stack de desarrollo.

Enlaces útiles:

Compartir

WhatsApp