Install Tailwind CSS into the project using npm:

npm install -D tailwindcss
npx tailwindcss init

That last command generates a tailwind.config.js. Have the content point to the location of the Thymeleaf templates:

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

Because Tailwind CSS only generates CSS for the classes you actually use in the HTML, we have to update our watch script to run the CSS build whenever the HTML changes. Update watch:html in package.json like this:

"watch:html": "onchange 'src/main/resources/templates/**/*.html' -- npm-run-all --serial build:css build:html",

We also need to update watch:service with the --no-inject-changes parameter:

"watch:serve": "browser-sync start --no-inject-changes --proxy localhost:8080 --files 'target/classes/templates' 'target/classes/static'"

Update application.css to use the default Tailwind CSS setup:

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

Update postcss.config.js to use the Tailwind CSS plugin:

const postcssConfig = {
    plugins: [
        require('autoprefixer'),
        require('tailwindcss')
    ],
};

...

Update application-local.properties to ensure the CSS is not cached:

spring.thymeleaf.cache=false
spring.web.resources.chain.cache=false

Start the Spring Boot application with the local profile.

Run npm run build && npm run watch from the command line.