3

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.

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I have multiple JTE location, how do I mention all the location. Can't we filter all the location that has .jte extension
TailwindCSS v4 comes with automatic source detection, so this is not necessary unless you have excluded all paths in the .gitignore file.
@SanJaisy - Is that a multi-module project? Can you please the structure or the code so that I can take a look?
@VijayKumar, its not a multi-module, however, I do have lots of folders and files in same project. How do I refer all the pages on different directory
1

TLDR:

  • a new separate CLI package is needed.
  • no source declaration is required;
  • there is no need for tailwind.config.js (but you can still use it, detailed below);
  • you don't need to use the @tailwind directives, instead use @import 'tailwindcss';;

Separate CLI package

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/cli package. 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"
}

There is no need to declare sources

TailwindCSS 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 .gitignore file
  • Binary files like images, videos, or zip files
  • CSS files
  • Common package manager lock files

Note: 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.

New CSS-first configuration

The 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).

Simpler CSS import

The @tailwind directives are deprecated and should be replaced with a single @import "tailwindcss";.

What's changed from TailwindCSS v4?

There have been several breaking changes besides these, which are not related to your question. These might also interest you:

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.