Overview

This post will describe the steps required to add tailwind css in spring boot project for server-side rendering.

Tailwind CSS is an amazing CSS utility tool which allows to add styling in web-pages without the need to write too much CSS code. It provides built-in utility classes that you can directly use to add stylings.

Pre-requisits:

You must have npm installed in order to use tailwind css.

Basic Setup

1. npm project initialization

First, we need to add npm packages in our spring boot project.

1. use following command to initialze npm package in spring boot project directory:

	npm init -y

This will add package.json file into spring boot project directory.

2. use following command to add required tailwind packages into project(will create package.json file):

	npm i -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli

3. use following command to add tailwinCSS and PostCSS config files into project(tailwindcc.config.js, postcss.config.js):

	npx tailwindcss init -p

2. tailwindCSS and PostCSS Configurations:

Now that we have added required packages, let's add required configurations.

1. add following configurations into tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

for more config options for content, see the content-docs.

2. add tailwindCC directives in your main CSS file(/resources/static/css/style.tailwind.css):

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

These directives are used by PostCSS to generate CSS file.

3. Now, add following script in package.json file to copy generate tailwindCSS file in directoy environment:

"scripts": {
    "build:postcss": "NODE_ENV=production postcss src/main/resources/static/css/style.tailwind.css -o  src/main/resources/static/css/style.build.tailwind.css",
    "watch:postcss": "NODE_ENV=development postcss src/main/resources/static/css/style.tailwind.css -o src/main/resources/static/css/style.build.tailwind.css -w"
},

Here, 'build:postcss' script is used to build production tailwindcss file, whereas 'watch:postcss' file is used to run tailwindcss file in development mode.

4. Now, run the following scripts for development and production respectively in spring boot directory:

npm run watch:postcss
npm run build:postcss

5. Add following line in html template(thymeleaf) to add CSS file(for non-thymleaf template, remove "th:" from link):

<link rel="stylesheet" th:href="@{/css/style.build.tailwind.css}">

Additonal Setup(if need arises)

1. Adding plugin

Let's say we wan to add daisy_ui plug-in into tailwindCSS.

1. Install dainsyUI by following command:

npm i -D daisyui@latest

2. Add following lines in tailwind.config.js file:

plugins: [require("daisyui")],

That's it. You have now successfully added daisyUI plugin. Other plug-ins follow the same approach.