Search⌘ K

Configure Maven

Understand how to set up Maven configurations to integrate Tailwind CSS in a Spring Boot application. Learn to use the frontend-maven-plugin for managing Node and npm, configure build executions, and implement cache-busting techniques to enable live reload and ensure efficient CSS updating during development.

We'll cover the following...

We’re not done yet, though. If we try to start the application now, the application.css in target/classes/static/css will look exactly the same as the source we wrote without any of the processing.

We have to configure Maven so that everything works nicely together.

We can observe the pom.xml file in the project below and observe the addition of frontend-maven-plugin with the following changes:

XML
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.2</version>
<relativePath/>
<!-- lookup parent from repository -->
</parent>
<groupId>com.tamingthymeleaf</groupId>
<artifactId>taming-thymeleaf-application</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Taming Thymeleaf 04.02</name>
<description>Example application for the Taming Thymeleaf book</description>
<properties>
<java.version>17</java.version>
<frontend-maven-plugin.version>1.12.0</frontend-maven-plugin.version>
<frontend-maven-plugin.nodeVersion>v16.13.1</frontend-maven-plugin.nodeVersion>
<frontend-maven-plugin.npmVersion>8.1.2</frontend-maven-plugin.npmVersion>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<excludes>
<exclude>**/*.html</exclude>
<exclude>**/*.css</exclude>
<exclude>**/*.js</exclude>
</excludes>
</resource>
</resources>
<pluginManagement>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<executions>
<execution>
<id>install-frontend-tooling</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>${frontend-mavenplugin.
nodeVersion}</nodeVersion>
<npmVersion>${frontend-mavenplugin.
npmVersion}</npmVersion>
</configuration>
</execution>
<execution>
<id>run-gulp-build</id>
<goals>
<goal>gulp</goal>
</goals>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</pluginManagement>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>release</id>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<executions>
<execution>
<id>run-gulp-build</id>
<goals>
<goal>gulp</goal>
</goals>
<configuration>
<arguments>build --env production</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>

Configuration

Note the changes made in the existing highlighted ...