tailwind css 와 handlebars 함께 사용하기

오늘은 NodeJS에서 많이 사용하는 handlebars 뷰템플릿 엔진과,

tailwind css를 함께 사용하는 방법에 대해 알아보겠습니다.

 

1. tailwind와 handlebars의 설치

tailwind는 개발환경에서 css작성 후,

최종적으로 css로 컴파일 된 파일만,

production 레벨에서 사용하게 됩니다.

 

따라서, Production레벨에서는 tailwindcss모듈을 설치할 필요가 없습니다.

그래서 설치할 때, 개발 의존성으로 -dev를 붙여줍니다.

 

npm install tailwindcss --save-dev

 

 

handlebars는 설치와 설정이 조금 더 복잡한데요.

이에 관해서는 아래 글을 참조해 주세요.

>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진

 

2. tailwind configuration

2-1. tailwind 환경설정

tailwind와 handlebars를 사용하는데 있어서 핵심은,

tailwind에게 뷰엔진인 handlebars 파일이 어디에 있는지를 알려주는 것 입니다.

 

npm의 환경설정 파일은, 'package.json' 이었는데요.

이런 개념에 해당하는 것이 NodeJS프로젝트의 루트에 위치하는 아래파일입니다.

• tailwind.config.js

이 파일의 content 배열안에,

handlebars 의 파일위치를 아래와 같이 알려주면 됩니다.

여기서는 './src/views/index.hbs'에 위치하고 있어서,

아래와 같이 해 주었습니다.

 

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

 

 

2-2. 여러개의 뷰파일 동시에 포함하기

대부분의 프로젝트는 여러개의 뷰파일들을 포함하게 되는데요.

위에서와 같이 배열로 하나씩 나열하는 것은 불편하지요.

 

이럴 때는, 아래와 같이 해 주면 됩니다.

'**'는 시작디렉토리부터 재귀적으로 디렉토리들을 탐색해서,

그 안의 모든 하위 파일들을 포함시킨다는 의미를 가집니다.

views 폴더 아래의 어떤 디렉토리와 파일들 중,

hbs로 끝나는 파일들이라는 의미입니다.

 

module.exports = {
  content: [
    './src/views/**/*.hbs'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

위와 같이 해주면,

아래와 같은 구조의 뷰파일들에도 모두 대응이 가능해 집니다.

 

src/
└── views/
    ├── index.hbs
    ├── about.hbs
    └── users/
        ├── login.hbs
        └── register.hbs

 

 

3. 실시간으로 css 변경하기

3-1. css transpile

tailwind로 css를 작성해 주면,

그 값을 실시간으로 플레인한 css로 변경해주도록 할 수 있는데요.

이런 transpile을 실행하려면, 아래 명령어를 입력해 주면 됩니다.

 

npx는 npm 패키지를 실행하고 해당 패키지를 설치하지 않고도 사용할 수 있게 해주는 도구입니다.

-i는 input, -o는  output 이라고 생각하면 쉽게 사용할 수 있습니다.

 

npx tailwindcss -i <원래 css파일 위치> -o <변경될 css파일 위치> --watch

 

 

예를 들면, 아래와 같이 해 줄 수 있겠습니다.

 

npx tailwindcss -i ./src/public/css/origin/origin.css -o ./src/public/css/dist/style.css --watch

 

하지만 이렇게 긴 명령어를 매번 타이핑해서 작업할 때마다 실행하는 것은 너무나 비효율적인 일입니다.

package.json을 이용하면 이런 부분을 쉽게 해결해 줄 수 있습니다.

 

3-2. Package.json에 Script 작성

아래와 같이 package.json 파일의 scripts 부분을 변경시켜 줍니다.

아래 스크립트에는 '--minify'를 추가해주어서, 좀 더 프로덕션모드에 최적화되도록 하였습니다.

 

"scripts": {
  "build-css": "tailwindcss -i ./src/public/css/origin/origin.css -o ./src/public/css/dist/style.css --watch --minify"
}

 

 

이제 아래 명령어로 실행해 주면,

실시간으로 css를 바꾸어 볼 수 있게 됩니다.

 

npm run build-css

 

이제 걱정없이 tailwindcss에 정의된 값들을 이용해서,

최신 UI를 만들어 주기만 하면 됩니다.

이상으로 handlebars와 tailwindcss를 함께 사용하는 방법에 대해서 정리해 보았습니다.