VSCode Tailwind CSS の Unknown at rule エラーに対応する

VSCode で Tailwind CSS を使った開発時に @tailwind 等の Tailwind CSS の独自アットルールに発生する unknownAtRules エラーの理由と対応方法について紹介します。

やりたいこと 

使用しているフレームワーク等によって記載するファイルは異なりますが Tailwind CSS の利用には、以下のようにルートとなる CSS ファイルに Tailwind Directive を記載することになります。

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

－ Install Tailwind CSS using PostCSS - Tailwind CSS

この Tailwind Directive を記載すると VSCode で以下のようなエラーが表示されます。

Unknown at rule @tailwind css(unknownAtRules)

このエラーを対処したいと思います。

原因 

VSCode には CSS コーディング用のビルトイン拡張機能が入っています。試しに VSCode 拡張機能の検索窓に @builtin css と入れるといくつか拡張機能が出てくると思います。

これらの拡張機能によって CSS のアットルールに存在しない @tailwind に対して警告を出しているものです。CSS のアットルールについては アットルール - CSS: カスケーディングスタイルシート | MDN をご覧ください。

この事象自体は Tailwind CSS の公式ドキュメントにも記載されています。

Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @config, and in many editors this can trigger warnings or errors where these rules aren’t recognized.
－ Editor Setup - Tailwind CSS

対応方法 

上記 Tailwind CSS の公式ドキュメントに記載されていますが、Tailwind CSS 公式の VSCode 拡張である Tailwind CSS IntelliSence をインストールして、CSS の VSCode Language Mode を Tailwind CSS に紐づけることでエラーは解消されます。なお、他の方法で対応方法を紹介しているサイトもありますが、公式の対応方法であることと、Tailwind CSS IntelliSence 拡張機能により提供されるオートコンプリートやリント機能により開発者体験がもたらされるので、本対応方法一択だと思います。

VSCode 拡張機能 Tailwind CSS IntelliSence のインストール 

VSCode 拡張機能の検索窓に Tailwind CSS IntelliSence と入力して検索してインストールするか、

Tailwind CSS IntelliSense - Visual Studio Marketplace にアクセスして install をクリックします。

CSS の VSCode Language Mode を変更 

以下の通り settings.json の files.associations に "*.css": "tailwindcss" を追加して、.css ファイルの Language Mode を Tailwind CSS に設定します。

Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode:

	"files.associations": {
 	  "*.css": "tailwindcss"
	}

－ Tailwind CSS IntelliSense - Visual Studio Marketplace

ユーザーグローバルの settings.json は、キーボードショートカット [Ctrl] + [Shift] + [P] でコマンドパレットを開き、Preferences: Open User Settings (JSON) コマンドを実行することで開くことができます。

ただ個人的にはユーザーグローバルの settings.json ではなく、プロジェクト固有の settings.json に設定することをお勧めします。プロジェクトルートに .vscode ディレクトリを作成し、その下に settings.json ファイルを作成することでプロジェクト固有の VSCode 設定ができます。プロジェクト固有の settings.json で設定する理由は、ユーザーグローバルだと Tailwind CSS を使用していないプロジェクトにも適用されてしまうということと、プロジェクト固有で設定していると Git リポジトリ管理対象に含められるので、extensions.json に Tailwind CSS IntelliSense を入れておき、settings.json と併せてリポジトリ管理対象としておけば、開発メンバー間で VSCode の設定が揃えられるからです。

(おまけ) クイックサジェスチョンの有効化 

Tailwind CSS IntelliSense の推奨 VSCode 設定に記載がありますが、VSCode はデフォルトでは文字列中ではオートコンプリートがトリガーされないようです。文字列中とは "" の中のことで、Tailwind CSS は HTML の class 属性内で使うことが多いので文字列中 (class="") であるため Tailwind CSS のクラス名をオートコンプリートさせるには、以下の通り settings.json で editor.quickSuggestions を有効化したほうがよさそうです。

By default VS Code will not trigger completions when editing “string” content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

"editor.quickSuggestions": {
  "strings": "on"
}

－ Tailwind CSS IntelliSense - Visual Studio Marketplace

あとがき 

VSCode 拡張機能 Tailwind CSS IntelliSense を使用して Unknown at rule @tailwind css(unknownAtRules) エラーに対処する方法を紹介しました。Tailwind CSS には @tailwind 以外にも独自アットルールがいくつか存在するので、ぜひ今回紹介した方法で対応してもらえればと思います。