개요

기존에 범용적으로 컴포넌트 개발을 하기위해 css module을 사용했으나 생산성도 안나오고,

Tailwind로 컴포넌트를 개발하면 범용성도 문제없고 생산성도 늘어날것같아 tailwind를 사용했으나..

이슈

tailwind로 생성된 컴포넌트를 tailwind가 없는 프로젝트에서 사용하려 할 경우 tailwind의 스타일이 존재하지 않기때문에 스타일이 적용되지 않음

해결

1. rollup설정에서 postCSS에 inject 기능과 tailwind에 purge기능을 사용하여 사용된 스타일 내용만 추출하여 빌드된 index.js에 추가하는 방법이 있다. 하지만, tailwind에 스타일을 포함하더라도, inject방식으로 js에 넣어줄경우 next와 같은 SSR에서는 컴포넌트는 불러오지만, 그 외에 js에서 head에 강제로 주입되는 js를 추가해주진 않으므로 SSR에 적합하지않음
2. 그래서 rollup에 extract 기능을 활용하여 순수한 css를 추출한뒤, 사용할 프로젝트 내에서 해당 css를 import하는 단순무식한 방법이 제일 나은듯..
3. 만약 프로젝트내에서 tailiwnd를 사용하고있다면

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js"
  ],
  plugins: [require("tw-elements/dist/plugin.cjs")],
  darkMode: "class"
};

위와같이 node modules 자체를 포함하도록 하여 스타일을 처리해주는 방법도 있다 (별로 좋은 방법같진않았는데 tailwind로 생성된 ui 라이브러리들은 대부분 저 방법을 권장..)