Moderne Webentwicklung erfordert nicht nur eine robuste Backend-Infrastruktur, sondern auch leistungsstarke Werkzeuge für die Gestaltung ansprechender Benutzeroberflächen. Dieser Beitrag enthält eine Schritt-für-Schritt-Anleitung zur Entwicklung einer Web-Anwendung mit Spring Boot mit Thymeleaf und Tailwind CSS via Gradle-Node-Plugin. Diese Kombination ermöglicht die Implementierung dynamischer Inhalte sowie die Erstellung responsiver und modernen Benutzeroberflächen.
./gradlew bootRun wird die Anwendung gestartet und anschließend unter der Adresse http://localhost:8080 erreichbar. ...
dependencies {
...
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf:3.2.0'
}
...<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1 th:text="#{myIndexText}">ignored</h1>
</body>
</html>
myIndexText=This is index!th: werden Thymeleaf-Anweisungen eingeleitet. In diesem Fall wird Thymeleaf angewiesen, den Text-Inhalt für das Element zu definieren. Mit #{...} werden Ressourcen über einen eindeutigen Schlüssel angefordert, hier der Text This is index mit dem Schlüssel myIndexText aus der zuvor definierten messages.properties.
Auf der offiziellen Seite von Thymeleaf sind alle Funktionen ausführlich und mit vielen Beispielen dokumentiert. Damit die Spring Boot Anwendung auch die Seite anzeigt, muss ein Controller erstellt werden, welcher das Template für den Endpunkt rendert.
package com.example.demo
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestMapping
@Controller
@RequestMapping
class DemoController {
@GetMapping("/")
fun myIndexEndpoint(model: Model): String {
return "index"
}
}
/foo, /bar und /baz dar....
@Controller
@RequestMapping
class DemoController {
@GetMapping("/")
fun myIndexEndpoint(model: Model): String {
model.addAttribute("myEndpoints", listOf("foo", "bar", "baz"))
return "index"
}
@GetMapping("/foo")
fun fooEndpoint(): String = "foo"
@GetMapping("/bar")
fun barEndpoint(): String = "bar"
@GetMapping("/baz")
fun bazEndpoint(): String = "baz"
}
myIndexText=This is index!
myNavigateText=Navigate to {0}
myFooText=This is foo!
myBarText=This is bar!
myBazText=This is baz!
...
<body>
...
<nav>
<a th:each="endpoint: ${myEndpoints}"
th:text="#{myNavigateText(${endpoint})}"
th:href="@{/{endpoint}(endpoint=${endpoint})}">ignored</a>
</nav>
</body>
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foo</title>
</head>
<body>
<h1 th:text="#{myFooText}">ignored</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bar</title>
</head>
<body>
<h1 th:text="#{myBarText}">ignored</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baz</title>
</head>
<body>
<h1 th:text="#{myBazText}">ignored</h1>
</body>
</html>
Unsere Anwendung sieht nun folgendermaßen aus:
Die Integration von Tailwind CSS in die Spring Boot Anwendung bietet eine flexible und leistungsstarke Styling-Option für das Frontend. Dieses Kapitel beschreibt die Integration und Verwendung von Tailwind CSS.
gradle-node-plugin hinzu.npmInstall wird so angepasst, dass npm die benötigten Pakete selbständig installiert....
plugins {
...
// Gradle plugin for Node
id 'com.github.node-gradle.node' version '7.0.1'
}
...
// Necessary for node-gradle plugin
node {
download = true
}
// This task will run `tailwindcss` command and generate the output.css file from styles.css
tasks.register('tailwind', NpxTask) {
command = 'tailwindcss'
args = ['-i', './src/main/resources/static/styles.css', '-o', './src/main/resources/static/output.css']
// This task depends on npmInstall task
dependsOn(tasks.npmInstall)
}
// Make npmInstall task depend on npmSetup task and adds package.json as input
tasks.npmInstall {
inputs.file('package.json')
dependsOn(tasks.npmSetup)
}
tasks.withType(KotlinCompile).configureEach {
...
// Update the output.css file every time after compiling Kotlin code
dependsOn(tasks.tailwind)
}
...
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
}{
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"tailwindcss": "^3.3.6"
}
}./gradlew tailwind ist nun ausführbar und sollte bei korrekter Konfiguration folgende Ausgabe erzeugen: 
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-gray-200 w-full p-4 flex flex-col gap-4 items-center justify-center;
}
.headline {
@apply text-4xl font-extrabold leading-none tracking-tight;
}
.headline-white {
@apply text-white;
}
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link href="/output.css"
rel="stylesheet">
</head>
<body>
<h1 class="headline"
th:text="#{myIndexText}">ignored</h1>
<nav class="flex flex-col sm:flex-row gap-1">
<a class="btn btn-blue"
th:each="endpoint: ${myEndpoints}"
th:text="#{myNavigateText(${endpoint})}"
th:href="@{/{endpoint}(endpoint=${endpoint})}">ignored</a>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foo</title>
<link href="/output.css"
rel="stylesheet">
</head>
<body class="bg-red-500">
<h1 class="headline headline-white"
th:text="#{myFooText}">ignored</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bar</title>
<link href="/output.css"
rel="stylesheet">
</head>
<body class="bg-green-500">
<h1 class="headline headline-white"
th:text="#{myBarText}">ignored</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baz</title>
<link href="/output.css"
rel="stylesheet">
</head>
<body class="bg-blue-500">
<h1 class="headline headline-white"
th:text="#{myBazText}">ignored</h1>
</body>
</html>
Es ist wichtig anzumerken, dass dieser Ansatz, wie jeder andere auch, Vor- und Nachteile hat. Thymeleaf ermöglicht eine nahtlose Integration von Backend- und Frontend-Logik, könnte aber bei komplexeren Frontend-Anforderungen an seine Grenzen stoßen. Tailwind CSS bietet eine unübertroffene Flexibilität beim Styling, aber die umfangreichen Klassen können zu überladenem HTML-Code führen.
Für weitere Details steht das GitHub Repository zur Verfügung, das alle im Artikel beschriebenen Schritte und Konfigurationen enthält.