# spring boot TailwindCSS와 연동하기, 사용방법

tailwindcss를 사용해서 앞단을 꾸며보자

 

tailwindcss를 사용하려면 또 복잡하다.. 안써볼 사람들은 넘어가면 된다.

 

일단 node.js가 난 이미 깔려있어서 괜찮은데 안깔려있으면 node.js는 무조건 설치하셔야 된다.

그다음 프로젝트 루트경로에서 cmd를 킨다음 해주면되는데

npm init -y
npm install -D tailwindcss@3.4.1 postcss autoprefixer

만일 다운중 에러가 뜬다면

 

환경변수를 설정 안해서 그런거기때문에

C:\Users\사용자명\AppData\Roaming\npm

해당 위치를 path에 꼭 등록하고 cmd창 껏다킨다음 다시 해보면 될것이다.

 

그러면 루트폴더 아래 해당 파일 2개가 생긴다.

• tailwind.config.js
• postcss.config.js

 

그다음 html 또는 thymeleaf 파일을 tailwind가 분석할 수 있도록 content 경로를 지정해야된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/main/resources/templates/**/*.html', // Thymeleaf 템플릿 경로
    './src/main/resources/static/**/*.js',      // JS 파일도 사용하면 이거 필요함
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

tailwind전용 css파일 만들기

경로에 해당 파일을 만들고

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

작성하고 저장한다.

 

아까 킨 cmd에 아래 명령어를 입력한다.

npx tailwindcss -i ./src/main/resources/static/css/tailwind.css -o ./src/main/resources/static/css/output.css --watch

 

문제없이 실행하면 output.css가 자동 생성되면서 tailwind 클래스들이 다 포함된다.

 

이제 해당 파일을 html파일에 head에 추가해주면 된다.

<link href="/css/output.css" rel="stylesheet">

 

 

예쁘게 잘 나온다.

 

+추가내용

필요한 css가 안나오면 계속해서 새로 빌드를 해줘야되는데

cmd에

npx tailwindcss -i ./src/main/resources/static/css/tailwind.css -o ./src/main/resources/static/css/output.css --watch

해주면 자동으로 빌드되서 새로운 css가 생성된다.