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を使っている前提となっています。

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

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

それが「T****ailwind CSS IntelliSense」と「PostCSS Language Support」です。

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

[

Tailwind CSS IntelliSense – Visual Studio Marketplace

Extension for Visual Studio Code – Intelligent Tailwind CSS tooling for VS Code

marketplace.visualstudio.com

[

PostCSS Language Support – Visual Studio Marketplace

Extension for Visual Studio Code – Syntax highlighting for modern and experimental CSS in VSCode

marketplace.visualstudio.com

上記の拡張機能をインストールしてもエラーが解消されない場合は、言語モードを設定して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をインストールしていないと候補に出てこないので拡張機能のインストールを先に行いましょう。

言語モードの変更のほかに、＠ルール（Tailwind CSSサポート構文）自体を無視する方法もあります。

VScodeのsetting.jsonに次のコードを追加します。

"css.lint.unknownAtRules": "ignore"

SCSSを使っている場合は次のコードを使ってください。

"scss.lint.unknownAtRules": "ignore"

また、＠ルールを無視するには設定画面からも可能です

言語モードを変更するかignore設定のどちらかを行うことでエラーが解消されると思います。

ここまでお疲れ様でした。

表題のエラーは初めてTailwind CSSを触る人には躓きやすいポイントかと思います。

この記事がエラー解決の助けになれば幸いです。

それでは快適なTailwind CSSライフをお送りください！