Spring Boot + thymeleaf + tailwindcss v4 problem #16594

callor · 2025-02-17T00:59:27Z

callor
Feb 17, 2025

Spring Boot + thymeleaf + tailwindcss v4 problem

I encountered a problem while creating a project by linking spring boot, thymeleaf, and tailwind v4, so I am reporting it here.

I structured my project as follows:

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-web")

	implementation("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect")
	implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

	implementation("io.github.wimdeblauwe:htmx-spring-boot-thymeleaf:4.0.1")

	compileOnly("org.projectlombok:lombok")
	annotationProcessor("org.projectlombok:lombok")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
	testRuntimeOnly("org.junit.platform:junit-platform-launcher")
}

Created a frontend folder under the project

SpringBoot-tailwind/src/main/resources/frontend

I created a nodejs project here

npm init -y

Then I created an input.css file and coded it as follows:

@import "tailwindcss";

Installed tailwind dependency

npm install tailwindcss @tailwindcss/cli

The generated package.json is as follows:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Spring Boot Tailwind",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "@tailwindcss/cli": "^4.0.6",
    "tailwindcss": "^4.0.6"
  }
}

I created the tailwind-202502.css file using the following command:

npx @tailwindcss/cli -i ./input.css -o ../static/css/tailwind-202502.css

I confirmed that the /src/static/css/tailwind-202502.css file was created.

Part of the generated file

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(0.971 0.013 17.38);
    --color-red-100: oklch(0.936 0.032 17.717);
    --color-red-200: oklch(0.885 0.062 18.334);
    --color-red-300: oklch(0.808 0.114 19.571);
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.577 0.245 27.325);
    --color-red-700: oklch(0.505 0.213 27.518);
    --color-red-800: oklch(0.444 0.177 26.899);
    --color-red-900: oklch(0.396 0.141 25.723);
    --color-red-950: oklch(0.258 0.092 26.042);
    --color-orange-50: oklch(0.98 0.016 73.684);
    --color-orange-100: oklch(0.954 0.038 75.164);
    --color-orange-200: oklch(0.901 0.076 70.697);

I wrote the html as follows

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{static/css/main_2025-02.css}">
    <link th:href="@{/static/css/tailwind-202502.css}" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<h1 class="text-3xl font-bold underline my-24">Hello world!</h1>
<h2 class="my-24">TailwinCss 적용 layout</h2>

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
    <div>
        <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
        <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
    </div>
</div>
<h2 class="mx-auto my-24"> daisyui theme 적용 버튼</h2>
<div class="mx-auto flex max-w-sm items-center gap-x-4">
    <button class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">
        Button
    </button>
    <button class="btn">Button</button>
    <button class="btn btn-primary">Button</button>
    <button class="btn w-64 rounded-full">Button</button>
</div>

The final result was that the tailwind class was not applied at all.

wongjn · 2025-02-17T01:10:11Z

wongjn
Feb 17, 2025
Collaborator

You'd want to run the CLI again after making changes. When developing, you can use the --watch flag so that the CLI automatically recompiles after files are changed.

0 replies

callor · 2025-02-17T02:10:02Z

callor
Feb 17, 2025
Author

@wongjn

I created a script to automatically compile input.css to tailwind-202502.css when building a SpringBoot project through IntelliJ.


plugins {
	java
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"

	id("com.github.node-gradle.node") version "7.1.0"

}

buildscript {
	dependencies {
		classpath("com.github.node-gradle:gradle-node-plugin:7.1.0")
	}
}

node {
	download = false
	version = "22.13.0"
	npmVersion = "11.1.0"
	nodeProjectDir = file("${projectDir}/src/main/resources/frontend/")
}

val tailwindCss = tasks.register<NpxTask>("tailwindcss") {
	val today = LocalDateTime.now().toLocalDate().toString();

	// v3
	// command.set("tailwindcss")

	// v4
	command.set("@tailwindcss/cli")

	args.set(listOf(
		"-i",
		"${projectDir}/src/main/resources/frontend/input.css",
		"-o",
		"${projectDir}/src/main/resources/static/css/tailwind-202502.css",
        ))
	dependsOn(tasks.npmInstall)
}

tasks.processResources {
	dependsOn(tailwindCss)
}

2 replies

Adewaley Apr 5, 2025

@callor I am also facing a similar issue while trying to use tailwind v4.1 with spring boot and thymeleaf. Did you ever discover the solution ?

Adewaley Apr 6, 2025

@callor in my case spring security was the issue. Since all resources in the context path of the application is secured by spring security (including static resources such as Javascript files, CSS files) you'd need to allow access to those resources in your security config. In my case this line

.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()

fixed the issue. In your case, it doesn't seem like you are using spring security, but you may try putting the css files in src/main/resources/static/css

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Spring Boot + thymeleaf + tailwindcss v4 problem #16594

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Spring Boot + thymeleaf + tailwindcss v4 problem #16594

Uh oh!

Uh oh!

callor Feb 17, 2025

Spring Boot + thymeleaf + tailwindcss v4 problem

I structured my project as follows:

Created a frontend folder under the project

I created a nodejs project here

Then I created an input.css file and coded it as follows:

Installed tailwind dependency

I created the tailwind-202502.css file using the following command:

I confirmed that the /src/static/css/tailwind-202502.css file was created.

I wrote the html as follows

The final result was that the tailwind class was not applied at all.

Replies: 2 comments · 2 replies

Uh oh!

wongjn Feb 17, 2025 Collaborator

Uh oh!

callor Feb 17, 2025 Author

Uh oh!

Uh oh!

Adewaley Apr 5, 2025

Uh oh!

Adewaley Apr 6, 2025

callor
Feb 17, 2025

Replies: 2 comments 2 replies

wongjn
Feb 17, 2025
Collaborator

callor
Feb 17, 2025
Author