모노레포 내 다른 앱에서, 혹은 다른 프로젝트에서 tailwindcss로 스타일을 구현한 패키지를 import하여 사용하려고 한다. 이에 대한 구현 방법을 다룬 글입니다.

개발 과정

1. 패키지를 dev 혹은 build 시 tailwindcss 스타일을 미리 compile한다.

// packages/ui/package.json
{
	"name" : "@guesung/ui"
	// ..
	"scripts": {
    "dev": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "build": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
  },
  // ..
}

• -i : 입력 파일 지정
• -o : 출력 파일 지정
• —-watch : 입력 파일의 변경 사항을 감시하고, 변경이 발생하면 자동으로 출력 파일 재생성

dev 혹은 build를 실행하면 Tailwind CLI를 활용하여 프로젝트에서 사용한 유틸리티를 미리 CSS로 만들어놓을 수 있다.

💡 Tailwind CLI?

tailwindcss를 적용하는 방법에는 크게 Tailwind CLI와 PostCSS를 두 가지가 있다.

공식문서에서 Next.js로 TailwindCSS를 설치할 때 PostCSS를 사용하는 방법을 권장하기 때문에 이 방법을 주로 사용해왔다. PostCSS는 JS플러그인으로, 스타일을 변환해주는 도구이다. 하지만 이 방식으로 적용할 경우 앱을 실행할 때 패키지의 tailwind.config.ts는 동작하지 않기 때문에 앱에서 패키지를 가져와 사용할 경우 적용이 안된다.

이를 해결하기 위해서는 해당 프로젝트의 tailwind.config.ts에서 해당 패키지의 경로를 설정해주는 방식도 있지만, 이 방식을 하게 될 경우 이 패키지를 사용하는 프로젝트가 반드시 tailwindcss를 설치해야 한다는 단점이 존재한다. 그래서, 여기서는 tailwind cli를 사용하여 미리 컴파일을 해놓고자 한다.

이제, 위 스크립트를 실행하면 아래와 같은 파일이 생성된다.

• pnpm run dev —-filter @guesung/ui

  

2. 앱을 dev 혹은 build 실행 시 패키지와 함께 실행한다.

패키지를 먼저 실행하여 컴파일을 하고, 그 다음 앱을 실행해야 패키지의 스타일이 적용이 된다. 이 때, 각각 명령어를 실행해도 되지만 개발 환경에서 실시간으로 변경 사항을 적용하기 위해서는, 혹은 배포 환경에서도 앱 배포 직전에 패키지 빌드를 수행하기 위해서는 스크립트를 순차적으로 실행해야 한다.

// package.json
{
	"scripts":{
		"dev:blog":"turbo run dev --filter=@guesung/ui --filter=blog"
		"build:blog":"turbo run build --filter=@guesung/ui --filter=blog"
	}
	// ..
}

위 스크립트를 실행하면 blog앱을 실행할 경우 ui패키지를 먼저 실행한 후, blog앱을 실행할 것이다.

트러블 슈팅

1. 4배의 크기가 되어 css가 생성이 된다

원인

tailwindcss-cli라는 패키지를 이용한 문제였다. tailiwindcss-cli라는 다른 패키지를 이용하는 것이 아니라, tailwindcss로 스크립트를 실행해야 한다.

2. 생성되는 css줄이 너무 길다.

이로 인해 빌드가 3.8초가 걸린다.

원인

1번과 같은 원인이었다. tailwind-cli를 제거하고, tailwind로 스크립트를 실행하니 정상적으로 해결되었다.

Reference

https://github.com/vercel/turbo/tree/main/examples/with-tailwind