Nextjs with tailwind기반 ui라이브러리 질문

Question

프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때  사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다.

아래는 현재 rollup.config.js입니다.

유길종 · Answer

컴포넌트 라이브러리를 구성하는 방법은 크게 두가지가 있습니다.
1. 컴포넌트에 직접 스타일을 입혀서 배포하기
-> 이 방법은 사용자측에서 컴포넌트를 Import 해서 사용하기만해도 모든 스타일이 입혀져있습니다.

2. 컴포넌트와 함께 CSS 파일도 배포하기
-> 이 방법은 사용자측에서 CSS파일도 함께 임포트해주어야합니다.

일반적으로 대부분의 컴포넌트 라이브러리는 사용자측이 라이브러리를 커스터마이징 할 수 있는 2번 방법을 주로 사용합니다.

테일윈드를 이용하여 컴포넌트 라이브러리를 빌드해서 릴리즈하고 싶으시다면 테일윈드 빌드 결과물도 사용자에게 제공하셔야합니다.

테일윈드는 클래스네임을 기반으로 그에 대응되는 CSS 클래스들을 생성하는 형태로 동작하기 때문입니다.

라이브러리를 배포하실 때 테일윈드도 빌드하여 내보내주시고 사용자측에서 내보낸 빌드결과물을 import 하도록 해주시면 되겠습니다