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を用いる。
tailwind.config.js
に presets
として、配列で別の 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も可能。
npx tailwindcss -m -i src/styles/style.css -o tailwind.style.min.css
出力したCSSファイルを、コンポーネントを使うプロジェクトで読み込んでやればいい。
振り返り
前回でも少し書いたが、プリセットが便利。
コンポーネント側のソースコードも content
に含めるといった注意点はあるものの、 primary
, secondary
のような色をコンポーネント側で宣言しておき、必要に応じて上書きすることで、色をプロジェクトごとに変更、といったことが簡単にできた。