はじめに

Next.jsプロジェクトでTailwind CSSを使って開発している際に、エディタ上に警告が表示される問題に遭遇しました。本記事では、その警告の内容と解決方法を紹介します。スタイルは正しく反映されていたものの、開発中に警告が表示されるのが気になったため、設定を調整して対応しました。

前提条件

この記事は、以下の条件に該当する方を対象としています。

• Next.js または React プロジェクトで Tailwind CSS を使用している
• テキストエディタは VSCode
• Tailwind CSS のカスタムルール（例：@apply）を CSS ファイル内で使用している

問題

CSSファイルで @apply を使用した際に、以下のような警告が表示されました。

解決方法

①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特有の構文（@apply など）を正しく認識できていないことにあります。

おわりに

最初はChatGPTを使って原因を探っていましたが、同じような問題に直面した方々の記事を参考にして、最終的に解決に至りました。

Tailwind CSS IntelliSenseは公式の拡張機能です。後から公式ドキュメントも確認したところ、今回の問題について以下のように明記されていました。改めて、一次情報にあたることの大切さを実感しました。

@tailwindTailwind CSS は、、、@applyなどのカスタム CSS アットルールを多数使用しており@config、多くのエディターではこれらのルールが認識されないため警告やエラーが発生する可能性があります。

※上記はTailwind CSSのドキュメントを日本語に翻訳しています。

参考