Mira la lección en vídeo
Accede al vídeo completo de esta lección y a más contenido exclusivo con el Plan Plus.
Desbloquear Plan PlusAgregar Tailwind CSS con webjars y usarlo en Thymeleaf
Webjars es una tecnología que permite incluir librerías frontend como dependencias Maven en proyectos Spring Boot. En lugar de descargar manualmente archivos CSS o JavaScript, podemos gestionar estas dependencias de forma centralizada a través del sistema de gestión de dependencias de Maven.
Para integrar Tailwind CSS en nuestro proyecto Spring Boot, utilizaremos webjars junto con el localizador de webjars, que simplifica la referencia a estos recursos desde nuestras plantillas Thymeleaf.
Configuración de dependencias Maven
Primero, necesitamos agregar las dependencias necesarias en nuestro archivo pom.xml. Añadimos tanto Tailwind CSS como el localizador de webjars:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>tailwindcss</artifactId>
<version>4.1.8</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
La primera dependencia incluye Tailwind CSS 4 como un webjar npm, mientras que la segunda proporciona el mecanismo para localizar automáticamente los recursos sin especificar versiones en las rutas.
Integración en plantillas Thymeleaf
Una vez configuradas las dependencias, podemos referenciar Tailwind CSS desde nuestras plantillas Thymeleaf. El localizador de webjars nos permite usar rutas simplificadas sin especificar la versión exacta:
<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi aplicación con Tailwind</title>
<link rel="stylesheet" th:href="@{/webjars/tailwindcss/dist/tailwind.min.css}">
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
El atributo th:href utiliza la sintaxis de URL de Thymeleaf @{...} para generar la ruta correcta al archivo CSS. El localizador de webjars resuelve automáticamente la versión y la ruta completa del recurso.
Aplicación práctica de clases Tailwind
Con Tailwind CSS integrado, podemos utilizar sus clases utilitarias directamente en nuestros elementos HTML dentro de las plantillas Thymeleaf:
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-800 mb-6">
Bienvenido a nuestra aplicación
</h1>
<div class="bg-white shadow-md rounded-lg p-6">
<p class="text-gray-600 leading-relaxed">
Este contenido está estilizado con Tailwind CSS
</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
Botón de ejemplo
</button>
</div>
</div>
En este ejemplo, utilizamos clases como container, mx-auto, px-4 para el layout y espaciado, text-3xl, font-bold para la tipografía, y bg-blue-500, hover:bg-blue-700 para colores y estados interactivos.
Integración con fragmentos Thymeleaf
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Podemos crear fragmentos reutilizables que incluyan la referencia a Tailwind CSS, facilitando su uso en múltiples plantillas:
<!-- fragments/head.html -->
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${title}">Título por defecto</title>
<link rel="stylesheet" th:href="@{/webjars/tailwindcss/dist/tailwind.min.css}">
</head>
Luego, podemos incluir este fragmento en cualquier plantilla:
<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragments/head :: head('Página principal')"></div>
<body class="bg-gray-100">
<main class="min-h-screen flex items-center justify-center">
<div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-semibold text-center text-gray-800 mb-6">
Formulario de contacto
</h2>
<!-- Contenido del formulario -->
</div>
</main>
</body>
</html>
Verificación de la integración
Para confirmar que Tailwind CSS se ha integrado correctamente, podemos crear una página de prueba simple que utilice varias clases utilitarias:
<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragments/head :: head('Prueba Tailwind')"></div>
<body class="bg-gradient-to-r from-blue-400 to-purple-500 min-h-screen">
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-xl shadow-2xl max-w-sm w-full">
<div class="text-center">
<h1 class="text-2xl font-bold text-gray-800 mb-4">
¡Tailwind CSS funciona!
</h1>
<p class="text-gray-600 mb-6">
Si ves este diseño correctamente, la integración fue exitosa.
</p>
<div class="space-y-2">
<div class="w-full h-2 bg-red-200 rounded"></div>
<div class="w-3/4 h-2 bg-yellow-200 rounded"></div>
<div class="w-1/2 h-2 bg-green-200 rounded"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Si al acceder a esta página vemos los estilos aplicados correctamente (gradientes, sombras, espaciado, colores), significa que Tailwind CSS está funcionando adecuadamente en nuestro proyecto Spring Boot con Thymeleaf.
Aprendizajes de esta lección de SpringBoot
- Comprender qué son los webjars y su utilidad en proyectos Spring Boot.
- Configurar dependencias Maven para incluir Tailwind CSS y el localizador de webjars.
- Referenciar Tailwind CSS en plantillas Thymeleaf usando el localizador para rutas dinámicas.
- Aplicar clases utilitarias de Tailwind CSS para estilizar componentes HTML.
- Crear fragmentos Thymeleaf reutilizables que incluyan Tailwind CSS para mantener un código modular.
Completa este curso de SpringBoot y certifícate
Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs