Tailwind CSSを導入したいけどスタイルが反映されない？Unknown at rule @tailwind エラーを解消する3つの方法

クラス名を考える必要がなかったり、HTMLとCSSを行き来しながらコーディングする必要がないなど、モダンなフロントエンドで人気のあるTailwind CSSですが、導入時に躓きやすいのが難点です。

公式サイトの「Get started」ページの通りに進めてみたけど、指定したスタイルが反映されなかったりエラーになる・・・といったことも。

エラーが発生しやすい箇所がこちらです。

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

Tailwind CSSを有効化するための構文ですが、「Unknown at rule @tailwind」とエラーメッセージが表示される場合は、構文が正しく認識されていないため別で拡張機能や設定が必要になります。

※この記事はエディターにVScodeを使っている前提となっています。

エラー解消に必要な拡張機能のインストール

エラーを解消するには二つの拡張機能をインストールする必要があります。

それが「Tailwind CSS IntelliSense」と「PostCSS Language Support」です。

Tailwind CSSインストール手順の中で「tailwindcss」と「postcss」の二つのパッケージをnpm経由でインストールしますが、その二つをVScodeで有効化するための拡張機能です。

上記の拡張機能をインストールしてもエラーが解消されない場合は、言語モードを設定してTailwind CSSに対応させましょう。

手順はこちらです。

Tailwind CSSサポート構文（global.css）を記述したCSSファイルを開く
- 先ほどご紹介したTailwind CSSサポート構文（@tailwind base;とか）を記述したCSSファイル（global.css）を開いて以下の方法を行います。
コマンドパレットを開いて言語モードを変更する
- 「Shift+Ctrl+P」でコマンドパレットを開き、「change language mode」と入力します。
- プレースホルダーに「言語の選択」とあるので「tailwind」と入力し、候補に出てきた「Tailwind CSS」を選択します。

Tailwind CSS IntelliSenseをインストールしていないと候補に出てこないので拡張機能のインストールを先に行いましょう。