はじめに
Next.jsのプロジェクトでTailwind CSSを利用していた際に、警告が表示されたので解決方法を紹介します。
前提条件
この記事は、以下の条件に該当する方を対象としています。
- Next.jsまたはReactのプロジェクトでTailwind CSSを使用している
- テキストエディタにVSCodeで開発している
- Tailwind CSSのカスタムCSSルール（例：
@apply）で記述している
問題
CSSファイルの@apply で Unknown at rule @applycss(unknownAtRules)が表示されました。警告なので、CSSは効いていますが、解決していきます。
解決方法
①Tailwind CSS IntelliSenseをインストール
VSCodeで拡張機能の「Tailwind CSS IntelliSense」をインストールします。
②settings.jsonに設定を追加
VSCode左下の歯車マークから「コマンドパレット」を押します。（ショートカットを使用する場合は、command+shift+P）検索バーで「Open User Settings」と入力して、settings.json ファイルで以下の設定を追加します。
このように設定することで、"*.css" というパターンに該当する全てのCSSファイルに対して、Tailwind CSSの言語サポートや機能を提供する拡張機能（もしくは設定）を適用することができます。
"files.associations": {
"*.css": "tailwindcss"
}
原因
この警告は、VSCodeがTailwind CSS特有の構文を正しく認識できていないことが原因です。
おわりに
最初はChatGPTで色々試してみましたが、同じ問題に遭遇している方々の記事を参考にさせていただき、解決できました。
Tailwind CSS IntelliSenseは公式の拡張機能です。URLが貼られていたので、解決した後に公式ドキュメントを読んだところ、今回の問題について、以下のように書かれていました。改めて一次情報を参考にする大切さを学ぶことができました。
@tailwindTailwind CSS は、、、@applyなどのカスタム CSS アットルールを多数使用しており@config、多くのエディターではこれらのルールが認識されないため警告やエラーが発生する可能性があります。
※上記はTailwind CSSのドキュメントを日本語に翻訳しています。
参考