Tailwind CSSの@applyディレクティブが処理されず、そのまま出力されてしまう現象に出くわした。

該当のコードは、メインのCSSファイルからインポートした、サブのCSSファイルに記述されている。試しにメインのCSSファイルに該当の記述をコピペすると、正しく変換された。

@applyディレクティブは、メインのCSSファイル（エントリポイント）でしか機能しないのだろうか。そんなバナナなハナシがあるはずない。いつものように、初歩的な何かに躓いているのだ。

postcss-importプラグインで解決

バンドルにはwebpackを使っている。CSS関連で使っているローダーは、style-loaderとcss-loaderとpostcss-loaderである（postcss-loaderは、Tailwind CSSの公式サイトにある案内の通りにインストールした）。

インポートしたCSSファイルの@applyがそのまま出力される一方、メインのCSSファイルに書いた@applyは変換されている。エラーは出ていない。ということは、Tailwindのビルドプロセスでは@importが処理されていない可能性が高い。どうやらpostcss-loaderは、@importを処理してくれないようだ。

ダメもとでcss-loaderとpostcss-loaderの順番を入れ替えてみたが、やっぱりダメだった。postcss-loaderで構文エラーが出る。

調べてみると、PostCSSにはimport文を扱うためのpostcss-importプラグインがあった。これをインストールしたところ、インポートしたファイルに含まれる@applyディレクティブが正しく処理された。

手順は下記の通りである。

postcss-importのインストール

bash
npm i -D postcss-import

portcss.config.jsの設定

js
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

珍しくChat-GPT4に聞いてもすぐに解決できない問題だった。最初にTailwind CSSを主題にして尋ねたせいだと思う。

というか、そもそも今日に至るまでPostCSSをほぼ意識したことがなかった。さっきまでPortCSSと誤読していたくらいだ。いつだって足元が疎かで、見事にすくわれる。

反省、反省。

参考資料