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

Question

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

jbhardwaj · Accepted Answer · 2024-10-09 02:03:33Z

2

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

edited Oct 9, 2024 at 2:03

answered Oct 8, 2024 at 23:23

jbhardwaj

4144 silver badges8 bronze badges

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

1 Comment

Francislainy Campos Over a year ago

Hello, thank you very much! Yes, despite the IntelliJ warning pointing the href to ./main and updating the tailwind config as per your suggested has fixed the issue. Thanks a million!

San Jaisy · Accepted Answer · 2025-02-24 09:48:27Z

Use the tailwind CLI to configure it

Tailwind.config

module.exports = {
  content: ['../jte/**/*.jte'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Index.jte

@import org.springframework.security.web.csrf.CsrfToken

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

If the spring security is implemented make sure you add main.css in the permit clause

@Bean
@Order(2)
public SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http)
        throws Exception {
    http
            .authorizeHttpRequests((authorize) -> authorize
                    .requestMatchers("/login", "/error", "/main.css").permitAll()
                    .anyRequest().authenticated()
            )
            // Form login handles the redirect to the login page from the authorization server filter chain
            .formLogin((login) -> login.loginPage("/login"));
    return http.build();
}

The main.css file is generated using the script in package.json. Which uses the tailwind cli

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related