springspring-boottailwind-csstailwind-css-4jte

How to use TailwindCSS v4 with spring boot and Java template Engine

I am using Spring boot application with Java template engine and when I did the setup for v3, a tailwind.config.js file was present to check for the JTE files as below:

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

However, With the v4 Tailwind CLI there is no configuration for the content files.

The script is not picking up the CSS class used in the JTE files

package.json

"scripts": {
  "build": "tailwindcss -i ./style.css -o ../resources/static/main.css --minify",
  "watch": "tailwindcss --watch -i ./style.css -o ../resources/static/main.css --watch"
}

style.css (now for v4)

@import "tailwindcss";

v3 style.css

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

When the build command is run npm run build none of the tailwind CSS is working.

login.jte

<form class="mt-8 space-y-6" action="/login" method="POST">
  ${csrfHiddenInput}

  <div>
    <label>User name</label>
    <input name="username" type="text" required class="w-full px-4 py-2 border"/>
  </div>
  <div>
    <label>Password</label>
    <input name="password" type="password" required class="w-full px-4 py-2 border" />
  </div>


  <div>
    <button type="submit"
            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      Sign in
    </button>
  </div>
</form>

Index.jte

@param gg.jte.Content content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spring Security Demo</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body class="bg-gray-100">
  ${content}
</body>
</html>

None of the CSS are working.

Solution

  • In Tailwind CSS v4.x, the @source directive is introduced to help Tailwind automatically discover the locations of your templates (JTE, Thymeleaf, HTML etc.) without requiring a separate tailwind.config.js file.

    So modify your input css file (in your case style.css) as below,

    @import "tailwindcss";
@source "../jte"; /* Specify JTE templates location */

    Now make sure you delete the output css (in your case main.css) and regenerate it again using the npm build or npm watch command.