javacssspring-boottailwind-cssjte

How to apply Tailwind CSS style to a JTE template using Java Spring Boot?

I am experimenting with the new JTE template and even though it works fine to display values through my HTML, I'm struggling to get the Tailwind CSS styles to show up.

I have a Tailwind autogenerated main.css file inside src/main/resources/static/main.css. I am trying to apply it to the below index.jte file, which lives inside src/main/jte. The Tailwind configurations and package.json file are inside src/main/frontend.

@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>

But even though i run these scripts which are in my package.json file:

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

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

I don't see the Tailwind style, despite being able to see the html page with the JTE retrieved values. I am also able to access the styles under http://localhost:8080/main.css

This is my Tailwind configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/main/jte/**/*.jte', // Ensure Tailwind scans your JTE files
    './src/main/resources/static/**/*.css', // Optionally include other static resources if needed
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

I have this in my pom file:


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

The whole project can be found here:

https://github.com/francislainy/jteTemplate-poc

Thank you very much.

UPDATE

Screenshot with project structure and IntelliJ warning when trying to point the css to ./main.css

enter image description here

Solution

  • As you said you can access http://localhost:8080/main.css, you have main.css generated under resources/static folder

    By default, this handler serves static content from any of the /static, /public, /resources, and /META-INF/resources directories that are on the classpath.

    All you have to do is to make link main css from your url accessible path and not from project folder path.

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

    Another thing I noted that tailwind was not generating utility classes. For me it only worked by specifying relative path scanning in tailwind.config.js.

    '../jte/**/*.jte', // Ensure Tailwind scans your JTE files