Tailwind CSS와 PostCSS, Rollup.js를 활용한 라이브러리 스타일 번들링

⭐ Tailwind + PostCSS와 Rollup.js 통합
- Rollup는 PostCSS 플러그인를 통해 Tailwind CSS 스타일을 처리하고 최적화하고, CSS 파일을 번들링함.
- 그 결과로 dist/index.css 파일에 Tailwind CSS로 작성된 스타일을 번들에 포함시킬 수 있음.
- 이를 통해 다른 프로젝트에서 해당 라이브러리 사용 시 설정한 tailwind 스타일링 사용 가능함

 

 

⭐ 왜 rollup 사용하였는가?

답변 )
UI 라이브러리 배포 프로젝트의 요구사항과 Rollup의 특성이 잘 맞았음

근거 )
1. UI 라이브러리 배포라는 단일 목적에 적합
- Webpack은 복잡한 애플리케이션 번들링에 강점이 있지만, 라이브러리 번들링에는 과도한 설정이 필요할 수도 있음
- Rollup은 불필요한 설정을 줄이고 최적화된 결과물을 얻을 수 있어 라이브러리 배포에 사용하지 적합하다고 생각함

2. 번들 크기 최적화와 플러그인 생태계 유연성
- 강력한 Tree Shaking 작동을 통해 불필요한 코드를 제거하며 번들 크기 최소화에 유리함
- PostCSS, TypeScript, Babel 등과 같은 플러그인과 통합하여 유연한 개발 환경 구성 가능

3. 다양한 모듈 형식 지원
- CommonJS와 ES Module 형식 모두 지원함

 

⭐ Rollup.js에서 어떻게 CSS를 처리했는가?  

답변) postcss 플러그인 설정을 활용해 TailwindCSS를 비롯한 CSS 파일을 처리함

설명)
1. rollup.config.mjs 내 사용 플러그인 명시

  plugins: [
      /* 플러그인들을 지정 */
      resolve({
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        skip: ["react", "react-dom"],
      }),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        exclude: ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.ts"],
      }),
      postcss({ extensions: [".css"], inject: true, extract: false }),
  ]

2. 글로벌 CSS 파일을 Tailwind CSS로 작성된 스타일 번들에 포함

{
  input: "src/globals.css", // 글로벌 CSS 파일
  output: [{ file: "dist/index.css", format: "es" }], // 번들링된 CSS 파일 저장 위치
  plugins: [
    postcss({
      extract: true, // CSS 파일을 추출하여 저장
      minimize: true, // CSS 파일 압축 (최소화)
    }),
  ],
}​

- input: "src/globals.css": src/globals.css 파일을 입력으로 사용해 스타일을 번들링함
- output: 번들링된 CSS 파일을 dist/index.css에 저장함
- postcss 플러그인 설정:
- CSS 처리 플러그인 사용함
- extract: true는 CSS 파일을 별도로 추출하여 dist/index.css에 저장하도록 함
- minimize: true는 CSS 파일을 압축하여 최적화함