Static Resources in Thymeleaf
CSS files, JavaScript files, and images are static resources. Thymeleaf helps you reference them correctly so they work in any environment.
CSS Stylesheets
Link your CSS files using th:href with the @{...} syntax. This handles the context path automatically.
<link rel="stylesheet" th:href="@{/css/style.css}"/>
If your static files are in src/main/resources/static/css/, this generates the correct URL. Works whether your app is at / or /myapp.
JavaScript Files
Same pattern for JavaScript. Use th:src for script tags.
<script th:src="@{/js/app.js}"></script>
Place your JS files in src/main/resources/static/js/. Thymeleaf resolves the path correctly at runtime.
Images
Use th:src for images too. The @{...} syntax works the same way.
<img th:src="@{/images/logo.png}" alt="Logo"/>
This is better than hardcoding src="logo.png" because it works regardless of where your app is deployed.
Resource Versioning
To bust browser caches, add version parameters to your resource URLs. Spring Boot can do this automatically.
<link rel="stylesheet" th:href="@{/css/style.css?v=1.0}"/>
<script th:src="@{/js/app.js?v=2.1}"></script>
When you update a file, change the version number. Browsers fetch the new version instead of using the cache.
Full HTML Head Example
Here's how a typical HTML head looks with Thymeleaf resource handling.
<head>
<meta charset="UTF-8"/>
<title th:text="${pageTitle}">My App</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
</body>
All resources use th:href or th:src with @{...}. No hardcoded paths, no deployment headaches.