npm 배포에 성공한 후 테스트 과정에서 문제가 발생했습니다. 컴포넌트를 불러와서 사용하니 어디에서 상속 받은지 알 수 없는 스타일이 적용되고 있었습니다.

문제를 해결하기 위해 첫 번째로, 컴포넌트를 사용하는 파일에서 라이브러리에 포함된 스타일 파일을 불러왔습니다. 스타일이 잘 불러오나 싶었지만 다른 부분에서 문제가 생겼습니다. 기존에 프로젝트에 적용되던 스타일과 충돌이 발생하여 다른 곳의 스타일이 망가지는 현상이 발생했습니다.

import 'design-system-team94/dist/index.css'

스타일 충돌로 망가진 레이아웃

두 번째로, tailwind.config의 content에 라이브러리의 컴포넌트들을 추가하는 방식을 사용해봤습니다. 이 방식을 사용하니 커스터마이징한 스타일들이 적용되지 않는 현상이 발생했습니다. 원인을 찾아보니 tailwind의 base 레이어와 충돌하는 것으로 추정되었습니다.

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    ...,
    './node_modules/design-system-team94/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {},
  plugins: [],
}

마지막으로, preset을 만들어 같이 배포한 후 tailwind.config의 presets에 이를 적용하는 방식으로 문제를 해결하였습니다. presets 옵션에 파일을 추가하니, 기본 tailwind 구성과 병합하여 커스터마이징한 클래스들이 올바르게 동작하였습니다.

// ./node_modules/design-system-team94/tw-config/preset

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          main: '#4C8BFF',
          strong: '#196AFF',
          light: '#E5EEFF',
        },
        secondary: {
          main: '#303030',
          strong: '#000000',
        },
        grey: '#A9A9A9',
      },
    },
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */

module.exports = {
  presets: [require('design-system-team94/tw-config/preset')],

  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/design-system-team94/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {},
  plugins: [],
}