[tailwindcss] Spring Boot + Thymeleaf 에 TailwindCSS 설정방법

Springboot + thymeleaf 말고도 html로 작성하는 경우 설정 방법.

Spring Boot + Thymeleaf는 설정되어 있다는 전재로 시작한다.

현재 tailwindcss 버전이 4로 Beta 버전으로 나와 있어서 그냥  tailwindcss를 설치하면 4버전이 설치가 된다. 

난 Beta 버전을 안 쓰기 위해 3.4.17로 설치했다.

우선 Srping boot의 /src/main/frontend 폴더를 생성한다.

1. 해당 폴더로 이동한 후에 tailwindcss와 postcss, autoprefixer을 설치한다.

npm install --save-dev tailwindcss@3 postcss autoprefixer

2. tailwindcss 초기화

npx tailwindcss init

그러면 tailwind.config.js 가 생성이 된다.

3. tailwind.config.js를 열어서 다음과 같이 수정한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../resources/templates/**/*.{html,js}"], // it will be explained later
  theme: {
    extend: {},
  },
  plugins: [],
}

4. main.css 생성한다.

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

5. package.json 파일에 script를 추가한 후 실행한다.

{
  "name": "frontend",
  "private": true,
  "scripts": {
        "build": "tailwindcss -i ./main.css -o ../resources/static/css/tailwind.css",
        "watch": "tailwindcss -i ./main.css --watch"
    },
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "tailwindcss": "^3.4.17"
  }
}

 

npm run build

이렇게 하면 main.css를 통해서 tailwind.css를 생성하게 된다.

frontend 폴더 내용은 최종 이렇게 된다.

그리고 Thymeleaf 에서 사용법은

head 부분에 다음항목을 추가한다.

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

 끝!!!