tailwind.config.jsの設定を共有し、複数プロジェクトで使う

Tailwind CSS + daisyUIで作成したコンポーネントを、複数のプロジェクトで共有しようとしたが、単純にコンポーネントのソースだけを読み込んでも、 tailwind.config.js の設定内容が引き継がれない。

設定を手動でコピーするのも現実的ではないため、共有する方法を調べたのでメモ。

環境

Tailwind CSS v3.2.4、daisyUI v2.43.0。

共有方法

読み込むプロジェクトでTailwind CSSを使っているかによって、方法が異なる。

Tailwind CSSを使っている場合は、プリセット機能が使える。

Tailwind CSSを使っていない場合は、CSSファイルとして設定内容を出力する。

読み込むプロジェクトでTailwind CSSを使っている場合

Tailwind CSSのPresetsを用いる。

tailwindcss.com

tailwind.config.jspresets として、配列で別の tailwind.config.js を読み込むと、プリセットをベースとして、 tailwind.config.js で記述した内容がマージされる。

module.exports = {
  presets: [
    require('@example/components/tailwind.config.js')
  ],
  ...
 }

ファイルパスではなく require で読み込むため、npmパッケージとしてコンポーネントを公開する場合、ファイルを参照できるようにしておく必要がある。

プラグイン設定も引き継げるので、 daisyUI の設定もそのまま利用可能。

コンポーネントをnpmパッケージとして公開する場合は、Tailwind CSSやdaisyUIは、 devDependencies ではなく dependencies としてインストールしておくといい。

引き継がれない設定

presets で読み込んだファイルに記述されていても、無視される設定がある。 Merging logic in-depth参照。

例えば、CSSクラス名のスキャン対象となるファイルを指定する content は、プリセットとして読み込んだ設定が引き継がれない。

npmパッケージやモノレポとして共有する場合、 content で読み込んだコンポーネントパッケージ側のソースファイルを指定しないと、コンポーネントパッケージ内でのみ使用されたクラスが有効にならないことに注意。

module.exports = {
  presets: [
    require('@example/components/tailwind.config.js')
  ],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // コンポーネント内のファイルも対象に含める
    './node_modules/@example/components/src/**/*.{js,ts,jsx,tsx}',
  ]
  ...
 }

読み込むプロジェクトでTailwind CSSを使っていない場合

@tailwind base; などを記述しているCSSファイルを入力として、 tailwindcss -i 入力CSSファイル -o 出力CSSファイル で、Tailwind CSSプラグインのクラスをCSSファイルとして出力できる。-m オプションでminifyも可能。

tailwindcss.com

npx tailwindcss -m -i src/styles/style.css -o tailwind.style.min.css

出力したCSSファイルを、コンポーネントを使うプロジェクトで読み込んでやればいい。

振り返り

前回でも少し書いたが、プリセットが便利。

コンポーネント側のソースコードcontent に含めるといった注意点はあるものの、 primary, secondary のような色をコンポーネント側で宣言しておき、必要に応じて上書きすることで、色をプロジェクトごとに変更、といったことが簡単にできた。