如何在Java Spring Boot中为JTE模板应用Tailwind CSS样式？

问题背景 #

正在试用JTE模板，HTML数据展示正常，但Tailwind CSS样式完全不生效。相关文件位置：

• 自动生成的main.css位于src/main/resources/static/main.css
• JTE模板文件index.jte在src/main/jte目录下
• Tailwind配置文件和package.json存放在src/main/frontend目录

相关代码与配置 #

index.jte代码 #

@import com.francislainy.jtetailwind.Page
@param String name
@param Page page

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${page.title()}</title>
    <meta name="description" content="${page.description()}">
    <link rel="stylesheet" href="/src/main/resources/static/main.css">
</head>
<body class="bg-slate-50">
<h1 class="text-3xl font-bold underline">Hello ${name}!</h1>
</body>
</html> 

package.json脚本 #

"build": "tailwindcss -i ./styles.css -o ../resources/static/main.css --minify",
"watch": "tailwindcss -i ./styles.css -o ../resources/static/main.css --watch"

Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/main/jte/**/*.jte', // 预期扫描JTE文件
    './src/main/resources/static/**/*.css', // 可选：包含其他静态资源
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

pom.xml依赖与插件 #

<dependency>
   <groupId>gg.jte</groupId>
   <artifactId>jte</artifactId>
   <version>3.1.12</version>
</dependency>
<dependency>
   <groupId>gg.jte</groupId>
   <artifactId>jte-spring-boot-starter-3</artifactId>
   <version>3.1.12</version>
</dependency>

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.15.0</version>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <nodeVersion>${node.version}</nodeVersion>
                <npmVersion>${npm.version}</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npm build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
    <configuration>
        <workingDirectory>src/main/frontend</workingDirectory>
        <installDirectory>target</installDirectory>
    </configuration>
</plugin>

当前现象 #

• JTE渲染的HTML页面正常显示
• 可通过http://localhost:8080/main.css访问样式文件
• 但Tailwind样式（如bg-slate-50、text-3xl等）完全不生效

更新尝试 #

将CSS路径改为./main.css时，IntelliJ出现警告，项目结构如下：

解决方案 #

1. 修正CSS引用路径 #

Spring Boot会把src/main/resources/static作为静态资源的根目录，所以页面里的CSS引用路径应该直接写/main.css，而不是本地文件系统的完整路径。修改index.jte中的link标签：

<link rel="stylesheet" href="/main.css">

之前的/src/main/resources/static/main.css是本地开发路径，浏览器无法正确识别这个Web路径，这是样式加载的第一个问题。

2. 修复Tailwind的内容扫描路径 #

Tailwind配置文件在src/main/frontend目录下，当前配置里的./src/main/jte/**/*.jte会被解析为src/main/frontend/src/main/jte/**/*.jte，这显然不存在。需要把路径改成相对于配置文件的正确位置：

content: [
    '../jte/**/*.jte', // 从frontend目录向上一级，定位到src/main/jte
    '../resources/static/**/*.css'
],

只有路径正确，Tailwind才能扫描到JTE文件中的类名，生成对应的CSS规则，这是样式不生效的核心原因。

3. 验证生成的CSS内容 #

执行npm run build后，打开src/main/resources/static/main.css，检查里面是否包含bg-slate-50、text-3xl这些类对应的CSS代码。如果没有，说明路径还是错的，重新检查content配置。

4. 清理重建项目 #

• 运行mvn clean install清理旧构建产物
• 重新执行npm run build生成最新CSS
• 重启Spring Boot应用，确保静态资源被正确加载

内容的提问来源于stack exchange，提问作者Francislainy Campos