Spring Boot + Thymeleaf + Tailwind CSS

Getting Started

To follow along you will need to have node and npm installed. To check if they are installed and what version you're currently running you can run the following commands:

node -v # v20.2.0
npm -v # 9.8.1

• Dependencies
  • Spring Web
  • Thymeleaf
  • Spring Boot Devtools

Frontend

Create a new directory /src/main/frontend and go into that directory using the command line. Run the following command to create a new package.json using the defaults:

npm init 

Tailwind CSS

Now that you have a package.json you can run the following command to install Tailwind CSS as a dev dependency. The next command will create a new tailwind.config.js

npm install -D tailwindcss
npx tailwindcss init

Update the Tailwind config, so it knows where the templates are that will include Tailwind CSS styles.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../resources/templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the node_modules folder to your .gitignore before you forget 🤦‍♂️

### Frontend ###

/src/main/frontend/node_modules/

Create a new file /src/main/frontend/styles.css and include the following:

styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a script that will take the styles file you just created as input and send the build output to /resources/static/main.css:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Spring Boot + Tailwind CSS Custom Login Form",
  "scripts": {
    "build": "tailwindcss -i ./styles.css -o ../resources/static/main.css",
    "watch": "tailwindcss --watch -i ./styles.css -o ../resources/static/main.css"
  },
  "author": "Dan Vega",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "tailwindcss": "^3.4.4"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.7"
  }
}

Maven Configuration

What we did in the previous section is great for development but what happens when we want to build an artifact for another environment like production. In that scenario we need to automate this process so that the npm run build command is run and the output of the build creates a new main.css in the static folder in the event this wasn't done locally.

For that we will be using the frontend-maven-plugin. This plugin will download/install node and npm, run npm install or any other commands we need it to. First you will need to declare the versions of node and npm you wish to use.

<properties>
    <java.version>22</java.version>
    <node.version>v20.2.0</node.version>
    <npm.version>6.14.3</npm.version>
</properties>

Next setup the plugin to install node and npm, run npm install and npm run build. The working directory in the configuration section is based on what we did in this tutorial. If your package.json is in a different directory please update that.

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.15.0</version>
  <executions>

      <execution>
          <id>install node and npm</id>
          <goals>
              <goal>install-node-and-npm</goal>
          </goals>
          <phase>generate-resources</phase>
          <configuration>
              <nodeVersion>${node.version}</nodeVersion>
              <npmVersion>${npm.version}</npmVersion>
          </configuration>
      </execution>

      <execution>
          <id>npm install</id>
          <goals>
              <goal>npm</goal>
          </goals>
          <phase>generate-resources</phase>
          <configuration>
              <arguments>install</arguments>
          </configuration>
      </execution>

      <execution>
          <id>npm build</id>
          <goals>
              <goal>npm</goal>
          </goals>
          <phase>generate-resources</phase>
          <configuration>
              <arguments>run build</arguments>
          </configuration>
      </execution>

  </executions>
  <configuration>
      <nodeVersion>${node.version}</nodeVersion>
      <workingDirectory>src/main/frontend</workingDirectory>
      <installDirectory>target</installDirectory>
  </configuration>
</plugin>