管理画面と公開ページでtailwindcssの設定を分ける

きっかけ

• tailwind.config.jsにカスタムした色を追加していて、管理画面でprimaryと命名してる色と公開ページでprimaryと命名してる色を、別の色にしたい
• 管理画面でしか使われてないclass等で、cssファイルが公開ページでも肥大化してしまうのを避けたかった

方法

https://tailwindcss.com/docs/functions-and-directives#config に書いてあった。

@config "./FILENAME.js";

のような記述を、

@tailwind base;
@tailwind components;
@tailwind utilities;

より前に書くと、FILENAME.jsが適用されるらしい。

活用例

tailwind.config.jsの、content部分についても分離して設定することができるので、今回のように特定のディレクトリ以下だけ色をを変えたいみたいなケースにぴったりかもしれない