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.
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.
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.
TLDR:
tailwind.config.js (but you can still use it, detailed below);@tailwind directives, instead use @import 'tailwindcss';;Starting from TailwindCSS v4, the required CLI and PostCSS code snippets have been separated into dedicated packages: @tailwindcss/cli and @tailwindcss/postcss. It looks like you'll need to install @tailwindcss/cli to properly use your build and watch commands.
In v4, Tailwind CLI lives in a dedicated
@tailwindcss/clipackage. Update any of your build commands to use the new package instead:npx @tailwindcss/cli -i input.css -o output.css
"scripts": {
"build": "npx @tailwindcss/cli -i ./style.css -o ../resources/static/main.css --minify",
"watch": "npx @tailwindcss/cli --watch -i ./style.css -o ../resources/static/main.css --watch"
}
npx @tailwindcss/cli instead of npx tailwindcss #1955 - GitHubTailwindCSS v4 comes with automatic source detection, so there is no need to declare sources. The only paths excluded are those specified in .gitignore. For more details, see here:
Which files are scanned
Tailwind will scan every file in your project for class names, except in the following cases:
- Files that are in your
.gitignorefile- Binary files like images, videos, or zip files
- CSS files
- Common package manager lock files
@import "tailwindcss" source("../src"); - TailwindCSS v4 Docs@import "tailwindcss" source(none); - TailwindCSS v4 DocsNote: For example, it's important to pay attention if you want to load class names from a dependency. These are typically excluded from the repository with .gitignore, and TailwindCSS v4's automatic source detection is designed to exclude them as well. However, with the @source directive, you can override this. e.g. Yes, I don't request the node_modules folder because of .gitignore, but with @source, I specifically request the node_modules/mypackage folder.
@source directive - TailwindCSS v4 DocsThe tailwind.config.js file has been removed. Instead, a CSS-first configuration approach has been introduced, offering many useful new CSS directives.
However, you can still use the legacy JavaScript-based configuration with the @config directive (though content declaration is no longer needed in this case).
The @tailwind directives are deprecated and should be replaced with a single @import "tailwindcss";.
There have been several breaking changes besides these, which are not related to your question. These might also interest you: