Tailwind CSS와 Angular 11.2 그리고 Nx와의 Perfect Integration Guide

2021년 3월 13일

🕵️‍♂️ 도입 배경

Angular는 11.2 업데이트가 되기 전까지는 Angular에서 TailwindCSS를 사용하기가 매우 불편했었다. 우리의 app 레포는 모노레포(Monorepo)로 운영되고 있어, 하나의 레포에 여러 앱이 공존하고 있다. 이에 따라 앱 마다 TailwindCSS를 사용할 때 개별적인 설정을 적용해야하는 요구사항이 빈번했다.

하지만 기존의 TailwindCSS를 Angular에서 사용할 때에는 그 요구사항을 충족할 수 없었다. 꼼수로 앱 폴더마다 다른 config를 적용하여 TailwindCSS를 빌드하고 static하게 생성하여 import하여 사용했던 것이다. (무친..!)

그런데 빠밤! Angular팀이 11.2 마이너 업데이트부터 TailwindCSS를 공식적으로 지원한다!라고 말을 하는 것이다. 이는 참으로 Angular 개발자에게 기쁜 소식이 아닐 수 없다.

https://github.com/angular/angular-cli/pull/19935

Angular 11.2 업데이트로 인해 우리가 TailwindCSS를 사용하기 위해 했던 일련의 과정들이 사라지게 되었다. 이제 Angular에서 React와 같이 Perfect하게 Integration을 할 수 있게 된 것이다!

😤 도입 방법

저 또한 자료가 너무 없어 삽질하면서 얻은 결과이기에, 특정 단계는 필요가 없을 수도 있습니다.

Angular에서 공식적으로 제공하는 Tailwind를 완벽하게 Integration하기 위해서는 아래의 과정을 하나도 빠짐없이 진행하면 된다.

Angular 11.2.5(stable)로 마이그레이션 ng update @angular/core @angular/cli
Nx Workspace 11.5로 마이그레이션 (optional - Nx를 사용하는 경우에만) nx migrate latest
1. Nx Workspace 11.2 기준 Angular 11.2가 비정상적으로 작동하여 마이그레이션 중단 사례 있음.
2. Nx Workspace 11.5 기준 Angular 11.2 정상 작동 확인
Dependency 사이의 문제 체크
TailwindCSS, PostCSS, autoprefixer latest 버전으로 업데이트 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
1. 1~3 과정을 다 진행했음에도 위 버전들이 지원하지 않을 경우 정상적으로 적용되지 않는 문제가 있음. (이것 때문에 조금 삽질했습니다 😞 )
2. PostCSS, autoprefixer는 직접 앱에 Direct로 설치해주어야 함.
3. 따로 PostCSS를 위해 webpack 설정을 할 필요는 없음. (Angular에서 지원)
기존에 사용하는 TailwindCSS Usage 삭제 (optional - 기존에 TailwindCSS를 사용했던 경우에만)

🎯 사용 방법

npx tailwindcss init를 통해 기본 tailwind.config.js 생성
tailwind.config.js 입맛에 맞게 수정!
TailwindCSS 적용하기! [주의] TailwindCSS application이 적용된 스타일 파일은 반드시 angular.json에 해당하는 앱의 styles 항목에 포함되어 있어야 합니다.
1. scss 파일에서
```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```
2. css 파일에서
```
@tailwind base;
@tailwind components;
@tailwind utility;
```

🐶 도입 효과

Nx Workspace를 사용함에 따라 앱 마다 tailwind.config.js가 적용이 될까?라는 걱정이 많이 되었다. 이러한 의문에 있어서 가장 좋은 해결법은 직접 해보는 것! 직접 tailwind.config.js를 앱마다 생성하여 적용해보면서 실제로 PurgeCSS가 적용이 되는지, 실제로 theme가 적용이 되는지 등을 확인해보았다.

실제로 완벽하게 TailwindCSS를 Angular App에 integration할 수 있었고, 지금까지 따로 TailwindCSS 스타일을 빌드하여 static하게 사용했던 것과 다르게 각 앱에 있는 tailwind.config.js의 수정만으로도 TailwindCSS를 간편하게 사용할 수 있다는 장점이 생겼다.

또 기존에는 PurgeCSS가 제대로 적용되지 않는 이슈가 있었는데, 이를 해결하기 위해 production, development 따로 TailwindCSS 스타일을 만들어서 운영했었다. 이제는 실시간으로 purging이 되어서 그럴 필요도 없어졌다!

여러모로 Angular의 공식 지원으로 인해 편해진 점이 많은 것 같다.

🗡 혹시라도 NX 관련하여 빌드에 문제가 생긴다면..!

아래의 과정을 따르시면 됩니다!

rm -rf node_modules
npm cache verify
npm i @nrwl/cli -g
npm i