Thymeleaf live reload with Spring Boot and Tailwind CSS

Posted at — Aug 27, 2022
Taming Thymeleaf cover
Interested in learning more about Thymeleaf? Check out my book Taming Thymeleaf. The book combines all of my Thymeleaf knowledge into an easy to follow step-by-step guide.

This is the 3rd and final part of my series on live reloading with Thymeleaf and Spring Boot, this time focusing on Tailwind CSS.

As an overview, these are the blog posts:

This post assumes you have a live reload setup as detailed in Thymeleaf live reload with npm scripts. If you want to add Tailwind CSS to it, you need to use a few special tricks. Not very difficult, but you just have to know it.

Follow these steps to get everything working:

  1. Install Tailwind CSS into the project using npm:

    npm install -D tailwindcss
    npx tailwindcss init
  2. 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: [],
    }
  3. 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",

    Notice how we use npm-run-all to run both build:css and build:html in serial.

  4. 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'"

    Without that change, browser sync tries to somehow manually inject the CSS but that does not seem to work very well. By adding the parameter, a page refresh is done instead.

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

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  6. Update postcss.config.js to use the Tailwind CSS plugin:

    const postcssConfig = {
        plugins: [
            require('autoprefixer'),
            require('tailwindcss')
        ],
    };
    
    ...
  7. Update application-local.properties to ensure the CSS is not cached:

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

To test it out:

  1. Start the Spring Boot application with the local profile.

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

This will open your default browser at http://localhost:3000. Any edit to a HTML file or the CSS file should show up in your browser as soon as you save it.

Conclusion

This post showed how to add Tailwind CSS to your Spring Boot with Thymeleaf project.

If you have any questions or remarks, feel free to post a comment at GitHub discussions.

If you want to be notified in the future about new articles, as well as other interesting things I'm working on, join my mailing list!
I send emails quite infrequently, and will never share your email address with anyone else.