Spring Boot + thymeleaf + tailwind 설정하기

2025. 4. 1. 00:48ㆍSpring

NextJs, React와 같은 프레임워크를 공부하는 것도 좋긴 하지만 빠르게 변화하다보니 학습에 대한 부담이 크다고 느껴졌다.
하지만 Spring Boot + Thymeleaf 에서 BootStrap을 사용해본적이 있었다.
이번에는 Spring Boot + Thymeleaf 에서 Tailwind CSS를 사용해보고자 한다. ( 개인적으로 Tailwind 가 더 이쁜듯.. )

Tailwind CSS 란?

홈페이지 바로가기

💡 Tailwind CSS는 plex , pt-4 , text-center , rotate-90 과 같은 class로 구성된 utility-first CSS framework로, markup에서 바로 어떤 디자인이든 만들 수 있다.
html에 style을 설정하는 부분을 Tailwind CSS가 제공해 주고 사용자는 제공받은 class만 사용하면 되어서 편리하다.
Bootstrap과 다르게 Tailwind CSS를 사용하려면 postcss (& autoprefixer)를 사용한 전처리 동작을 위해 node에서 빌드하는 과정이 필요하다.

NPM(Node Package Manager)으로 Tailwind CSS 사용하기

Package 추가하기

  • 나 같은 경우 node 버전을 19.0.0으로 설치했다. ( 이때는 19버전이 LTS )

    npm install -D tailwindcss

  • 설치가 완료되면 package.json 파일 아래 devDependencies가 추가된다.

    "devDependencies": {  
"autoprefixer": "^10.4.20",  
"postcss": "^8.4.41",  
"tailwindcss": "^3.4.10"  
}
tailwindcss 설치하기
npx tailwindcss init
  • 위 명령어를 실행하면 tailwind.config.js 파일이 만들어질것이다. 해당 파일에서 기본적인 설정을 한다.
    /** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: ["../resources/templates/**/*.{html,js}"],  
  theme: {  
      extend: {},  
  },  
  plugins: [],  
}
  • templates(html 파일 위치)를 지정한다.
Tailwind CSS를 사용하기 위해 css 파일을 만들고 다음과 같이 추가해야한다.

파일 위치는 src/main/frontend/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Watch 옵션 사용해보기
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  • 위 명령어는 /src/input.css 가 변경되면 /dist/outpu.css 에 빌드한 결과물을 만들어준다.
    이때 일회성으로 해당 처리를 하는게 아니라 계속 지켜보도록 --watch 옵션을 사용.
  • 만들어진 output.css 를 보면 Tailwind CSS가 제공하는 기본적인 css 설정이 추가되어 있는 것을 확인 할 수 있다.
    예시
    @tailwind base;
@tailwind components;
@tailwind utilities;

.my-header {
@apply text-2xl my-4 mx-4
}

watch 명령으로 위 명령이 실행되고 있는 동안 input.css를 ( 위 예시 문 처럼 )수정하면 output.css 를 html 페이지에서 지정하여 사용하면 된다.
```html
<!DOCTYPE html>
<html>
<head>
    <link href="/dist/output.css" rel="stylesheet" />  
</head>
<body>
<div class="my-header">테스트</div>
</body>
</html>

Java Application에서 Tailwind CSS 사용하기

  • 앞서 NPM에서 기본적으로 Tailwind CSS가 어떻게 사용되는지 설명하였다.
    그렇다면 Java Application에서 동작시키게 하려면 어떻게 해야할까?🤔
    Java의 compile과 별도로 node로 대상 html, js의 변경에 대해 빌드해야 한다.
들어가기에 앞서..
  • 나는 Spring Boot + Thymeleaf 기반 App을 다음 위치에서 html과 static resource (css, js)를 관리하려고한다.
    2025-04-01-00-45-26.png
  • node 빌드 대상 위치는 /src/main/frontend로 정할것이고, 빌드한 결과물은 static resource 위치인 /src/main/resources/static 아래에 생성되도록 할 것이다.
package 만들기
  • /src/main/frontend 에 package.json 을 만들고 기본적인 정보를 선언한다.
    {
"name": "frontend",
"private": true
}
  • 해당 위치에서 npm 명령어로 tailwindcss, postcss, autoprefixer를 추가한다.
    npm install --svae-dev tailwindcss postcss autoprefixer
    Tailwind CSS관련 node모듈들이 추가되고 package.json 에 의존성이 다음과 같이 추가된다.
{
  "name": "frontend",
  "private": true,
  "devDependencies": {  
  "autoprefixer": "^10.4.20",  
  "postcss": "^8.4.41",  
  "tailwindcss": "^3.4.10"  
  }
}

  • /src/main/fronted에 tailwind.config.js를 추가하고 다음과 같이 설정하자.

    /** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: ["../resources/templates/**/*.{html,js}"],  
  theme: {  
      extend: {},  
  },  
  plugins: [  
      require('@tailwindcss/aspect-ratio'),  
      require('tailwindcss'),  
      require('autoprefixer'),  
      require('@tailwindcss/forms'),  
  ],  
}
// Spring Boot + Thymeleaf에서 사용하는 /src/main/resources/template 하위의 html, js 파일들을 node에서 빌드 시 사용할 Tailwind CSS class name이 포함된 소스 파일의 경로로 구성

  • 이제 /src/main/frontend/main.css 를 빌드하여 /src/main/resources/static/main.css로 결과물을 생성하도록 설정한다.

    /* /src/main/resources/static/main.css */
@tailwind base;  
@tailwind components;  
@tailwind utilities;

  • 추가적으로 package.json에 빌드 스크립트를 추가한다.

    "name": "frontend",  
"version": "1.0.0",  
"main": "index.js",  
"license": "ISC",  
"scripts": {  
"test": "echo \"Error: no test specified\" && exit 1",  
"build": "tailwindcss -i ./main.css -o ../resources/static/main.css",  
"watch": "tailwindcss --watch -i main.css -o ../resources/static/main.css"  
},
"dependencies": {  
"@tailwindcss/aspect-ratio": "^0.4.2",  
"@tailwindcss/forms": "^0.5.7"  
}

// npm run build를 /src/main/frontend 위치에서 실행하면 /src/main/frontend/main.css가 /src/main/resources/static/main.css 위치로 빌드되는 것을 확인 가능


##### 💡 TIP
- package.json script 항목에 아래처럼 watch를 추가하면 옵션을 따로 지정할 필요 없이 npm run watch 명령만으로 계속 변경내역을 지켜보고 빌드하게 된다.
```json
"name": "frontend",  
"version": "1.0.0",  
"main": "index.js",  
"license": "ISC",  
"scripts": {  
  "test": "echo \"Error: no test specified\" && exit 1",  
  "build": "tailwindcss -i ./main.css -o ../resources/static/main.css",  
  "watch": "tailwindcss --watch -i main.css -o ../resources/static/main.css"  
}

전체적인 구조

2025-04-01-00-44-55.png

'Spring' 카테고리의 다른 글

In-memory 왜써? TestContainer쓰자!  (0) 2024.07.11
RequiredArgsConstructor VS Qualifier 빈 주입  (0) 2022.05.15
인터페이스 빈 주입을 해야하는 이유  (0) 2022.05.15
[Spring] BDDMockito VS Mockito  (0) 2021.08.12
[Spring] TDD VS BDD  (0) 2021.08.12

관련글

티스토리툴바