Tailwind CSS 使用時コンテンツ検出されず必要な css が出力されないとき

はじめに

Tailwind CSS には記述されている CSS を検出し、必要な CSS のみ出力されるようになっている。 Tailwind CSS v4 から自動検出されるようになったが v3 以前や 明示的に参照してほしいファイルが有るときに指定する記述がある。

@source について

タイトルの通り検出されなかった場合、 @source を明示的に指定することで回避可能である。 Tailwind CSS の Build process から認知されないような node_modules 上に無いライブラリやファイル。その他テンプレートファイル php, slim 等を明示的に指定する。

もし、 ../foo/bar ディレクトリ配下のファイルを見てほしい場合は以下のように記述すれば良い。

  @import "tailwindcss";
+ @source "../foo/bar/"

Ref