cdn의 문제

html에 스크립트 cdn을 하나만 추가해주면 간단하게 tailwind사용이 가능하다.

<script src="https://cdn.tailwindcss.com"></script>

하지만 cdn 방식은 url주소나 버전 릴리즈에 의존적이기 때문에 예상치 못한 오류가 발생할 수 있는 위험이 있다.

그리고 무엇보다, @apply를 사용해서 tailwind를 사용한 사용자 커스텀 클래스를 지정하여 모아두고 전체 템플릿에서 사용하고 싶었는데, cdn방식으로는 쉽지가 않고, html이 너무 무거워지기 때문에 문제가 됐다.
때문에 직접 tailwind 라이브러리를 설치하여 사용해보기로했다.

npm 다운

일단 spring boot 프로젝트 내에 npm이 없기 때문에 npm을 먼저 설치해줘야한다. 프로젝트의 src/main/resources/static 디렉토리에서 npm을 설치해준다. npm을 설치하면서, tailwind도 같이 설치해준다.

npm install -D tailwindcss

위의 사진처럼 node_modules와 package.json이 생성된다.

tailwindcss 설치 확인

node_modules에 들어가서 내리다보면 tailwindcss라는 디렉토리가 있다면 설치가 성공적으로 끝난 것이다.

tailwind.config.js 파일 생성

그리고 루트 폴더에 가서 아래의 명령어를 실행해서 tailwind.config.js파일을 생성해준다.

npx tailwindcss init

그럼 tailwind.config.js 파일이 루트에 만들어진다.

tailwind.config.js 설정

해당 파일에 tailwind를 사용하는 template 파일들의 경로를 설정해주어야한다..... 고 했는데, 안해줘도 돌아가긴했다.

tailwind를 springboot에서 사용하는 경우의 포스팅을 찾기가 어려워서 잘 모르겠다. 거의 js 라이브러리를 사용할 때 같이 사용하는 포스팅 뿐이라..

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

빌드 파일 생성

아래 명령어를 통해서 tailwind.config.js 파일을 빌드해주어 output.css 파일을 생성한다. 경로는 자신의 프로젝트에 맞는 경로를 넣어주면 된다.

npx tailwindcss-cli --output css/output.css

그럼 위와 같은 css파일이 생성된다.

적용

이제 html 문서에서 저 output.css 파일을 바인딩 해주기만 하면 tailwind 적용이 완료된다.

@apply를 사용한 파일 빌드

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

.custom {
    @apply text-gray-800 text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 hover:bg-gray-700 focus:outline-none focus:ring-gray-800;
}

위와 같은 양식으로 사용자 커스텀 클래스를 만들 수 있다.
그리고 똑같이 해당 파일을 빌드하여 output파일을 만들어주면 된다.

npx tailwindcss -i style.css -o style-output.css

-i에는 적용 파일일의 경로를 설정하고, -o에는 output 경로를 적어두면 된다.
나는 모두 같은 디렉토리에서 작업하여 파일명만 적어주었다.

spring boot와 tailwind를 함께 사용하는 사례가 잘 안나와서 찾기가 힘들었다.
어째 하기는 했지만 nodejs 관련해서 아는게 없기 때문에 나도 뭐가 뭔지 잘 모르겠다.