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.

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.

Share Improve this question edited Mar 17 at 7:00 rozsazoltan 11.5k6 gold badges21 silver badges60 bronze badges asked Feb 20 at 11:10 San Jaisy 17.2k43 gold badges206 silver badges348 bronze badges

Add a comment |

2 Answers 2

Sorted by: 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.

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"
}

Using Tailwind CLI - TailwindCSS v3 to v4 upgrade guide
Use npx @tailwindcss/cli instead of npx tailwindcss #1955 - GitHub

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:

Automatic Source Detection from TailwindCSS v4 - StackOverflow

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

Setting your base path: @import "tailwindcss" source("../src"); - TailwindCSS v4 Docs
Disable automatic detection: @import "tailwindcss" source(none); - TailwindCSS v4 Docs

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.

@source directive - TailwindCSS v4 Docs

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.

Functions and directives - TailwindCSS v4 Docs
New CSS-first configuration option in v4 - StackOverflow
Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command - StackOverflow

However, you can still use the legacy JavaScript-based configuration with the @config directive (though content declaration is no longer needed in this case).

TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Simpler CSS import

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

Removed @tailwind directives - TailwindCSS v3 to v4 upgrade guide
Removed @tailwind directives - StackOverflow

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:

Upgrade guide - TailwindCSS v3 to v4 upgrade guide
Cannot build frontend using TailwindCSS - StackOverflow

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745176876a4615233.html

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

2 Answers 2

Separate CLI package

There is no need to declare sources

Which files are scanned

New CSS-first configuration

Simpler CSS import

What's changed from TailwindCSS v4?

发表回复

评论列表（0条）

联系我们

400-800-8888

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

2 Answers 2

Separate CLI package

There is no need to declare sources

Which files are scanned

New CSS-first configuration

Simpler CSS import

What's changed from TailwindCSS v4?

相关推荐