📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
In this tutorial, we will learn:
- How to add CSS and JS files to Thymeleaf templates.
- How to use CSS and JavaScript in our Thymeleaf templates.
First, We'll start by adding CSS styling to our page and then move on to adding some JavaScript functionality.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html
Add Maven Dependency
In order to use Thymeleaf in our spring application, let's add the Spring Boot Starter for Thymeleaf to our Maven configuration:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thymeleaf Example with Spring Boot
1. Folder Structure
As we know that Thymeleaf is a templating library that can be easily integrated with Spring Boot applications.
- By default, Thymeleaf expects us to place those templates in the src/main/resources/templates folder.
- For CSS and JavaScript files, the default directory is src/main/resources/static.
Let's create static/css and static/js folders for our CSS and JS files, respectively.
2. Adding CSS
Let's create a simple CSS file named main.css in our static/css folder and define some basic styling:
h2 {
font-family: sans-serif;
font-size: 1.5em;
text-transform: uppercase;
}
strong {
font-weight: 700;
background-color: yellow;
}
p {
font-family: sans-serif;
}
Create Thymeleaf Template
Next, let's create a Thymeleaf template named add-css-js-demo.html in our resources/templates folder to use these styles:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add CSS and JS to Thymeleaf</title>
<link th:href="@{/css/main.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/actions.js}"></script>
</head>
<body>
<h2>Style Heading H2</h2>
<p>
This is text on which we want to apply <strong>very special</strong> styling.
</p>
<button type="button" th:onclick="showAlert()">Show Alert</button>
</body>
</html>
We load the stylesheet using the link tag with Thymeleaf's special th:href attribute.
3. Using JavaScript
Next, we're going to learn how to add a JavaScript file to our Thymeleaf page.
Let's begin by adding simple JavaScript function to a file in src/main/resources/static/js/demo.js:
function showAlert() {
alert("The button was clicked!");
}
Let's go back to Thymeleaf template and add a <script> tag that points to our JavaScript file:
<script type="text/javascript" th:src="@{/js/demo.js}"></script>
Now, we call our method from our template:
<button type="button" th:onclick="demo()">Show Alert</button>
When we run our application and click the Show Alert button, we'll see the alert window.
Related Thymeleaf Tutorials and Examples
- Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
- Thymeleaf Example with Spring Boot
- How to Add CSS and JS to Thymeleaf
- Add Bootstrap CSS to Thymeleaf
- How to handle null values in Thymeleaf?
- How to Loop a List by Index in Thymeleaf
- Thymeleaf Array Example - Array Index, Array Iteration
- Thymeleaf Enums Example
- Thymeleaf If Else Condition Example
- Thymeleaf Switch Case Example
Comments
Post a Comment
Leave Comment