Thymeleaf and TailwindCSS 4.0 updates

Posted at — Jan 29, 2025

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.

Last week Tailwind CSS v4.0 was released. This, unfortunately, broke the ttcli tool to generate a Spring Boot with Thymeleaf project when you selected Tailwind CSS.

Ttcli update

I have just released ttcli 1.7.0 that restored compatibility so Tailwind CSS can be selected again to generate a project.

The tailwind.config.js file is no longer created as Tailwind CSS 4 now configures everything in CSS.

You will notice that application.css now looks like this:

@import "tailwindcss";
@source "../../templates";

The first line is the replacement of the @tailwind directives used previously in Tailwind CSS 3:

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

The @source directive helps Tailwind CSS 4 to discover where our HTML templates are to generate the proper CSS.

Tailwind CSS plugins are now also configured in application.css using the @plugin directive:

@import "tailwindcss";
@source "../../templates";
@plugin "@tailwindcss/forms";

Upgrading to Tailwind CSS 4.0

If you want to upgrade an existing project to Tailwind CSS 4.0, you can run their upgrade tool:

npx @tailwindcss/upgrade@next

I have run it on the sources of the final application that you build in my Taming Thymeleaf book. Most of the upgrade was successful. However, the postcss configuration could not be updated. You need to do the following manually:

Run npm i -D @tailwindcss/postcss to install the new Tailwind CSS postcss plugin.

Update postcss.config.js to this:

const postcssConfig = {
    plugins: [
        require('@tailwindcss/postcss')
    ]
};

// If we are in production mode, then add cssnano
if (process.env.NODE_ENV === 'production') {
    postcssConfig.plugins.push(
        require('cssnano')({
            // use the safe preset so that it doesn't
            // mutate or remove code from our css
            preset: 'default',
        })
    );
}

module.exports = postcssConfig;

Book updates

I will be releasing updates to my books Taming Thymeleaf and Modern frontends with htmx later this year with updates for Tailwind CSS 4.0.

Some tips for now:

Setting the Inter var font is now done in CSS:

@theme {
  --font-sans: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

Plugins are configured in CSS:
```
@import "tailwindcss";
@source "../../templates";
@plugin "@tailwindcss/forms";
```
Note that recent versions of Tailwind UI no longer require the tailwindcss-forms plugin.

I hope that the above information will provide the necessary guidance to use Tailwind CSS 4.0 already when learning from the books.

Conclusion

Tailwind CSS 4.0 is the next generation of Tailwind CSS with quite some advantages. I look forward to discovering more about the new features in my Thymeleaf projects.

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

Previous: Problems I no longer have by using Server-side...

Wim Deblauwe