TailwindCSSのエントリー単位で利用するconfigを切り替える方法メモ📝

管理画面ではdaisyUI使うがユーザー画面では使いたくないみたいなケースでTalwindCSSのエントリー毎に利用するtailwind.config.jsを切り替えたくて、やり方を調べたのでメモ📝

結論から言うと管理画面で利用しているadmin/tailwind.cssの@configで利用したいtailwind.config.jsを指定してあげれば大丈夫だった 🙆

@config Use the @config directive to specify which config file Tailwind should use when compiling that CSS file. https://tailwindcss.com/docs/functions-and-directives#config

以下のような感じでadmin/tailwind.cssで指定してあげれば 🆗

admin/tailwind.css

@config "your_root_path/tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

ユーザー側のtailwind.config.jsではcontentでadmin側で指定しているものは除外するようにするとサイズも無駄に大きくならなくて良さそうでした🍃

tailwind.config.js

module.exports = {
  content: [
    './views/**/*',
    '!./app/views/admin/**/*' // adminで使われているものはcontentの対象から除外する
  ],
  plugins: [daisyui],
  daisyui: {
    themes: ["light"],
  },
};

参考

zenn.dev

github.com