Menu
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.
341
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.
90
answered Dec 11 '25 12:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With