Tailwind CSS
VS Code
Notion

VS Codeで発生する「Unknown at rule @tailwind」エラー

Tailwind CSSを使用する際に「Unknown at rule @tailwind」というエラーがVisual Studio Code (VS Code)で表示されることがあります。このエラーは、VS CodeのCSS IntelliSenseがTailwind CSSの構文を認識しないために発生します

Tailwind CSSを使用する際に「Unknown at rule @tailwind」というエラーがVisual Studio Code (VS Code)で表示されることがあります。このエラーは、VS CodeのCSS IntelliSenseがTailwind CSSの構文を認識しないために発生します。この問題を解消するためには、VS Codeに適切な拡張機能を導入することが有効です。その具体的な手順を説明します。

#1. VS Codeの拡張機能マーケットプレイスを開く

まず、VS Codeを開きます。次に、左側のサイドバーにある拡張機能アイコン（四角が4つ並んでいるアイコン）をクリックして、拡張機能マーケットプレイスを開きます。

#2. 「Tailwind CSS IntelliSense」拡張機能をインストールする

検索バーに「Tailwind CSS IntelliSense」と入力します。Tailwind Labsが提供している「Tailwind CSS IntelliSense」拡張機能が表示されるはずです。これを選択し、「インストール」ボタンをクリックしてインストールします。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2024-06-25_15.54.12.png

#3. 拡張機能の設定を確認する

拡張機能がインストールされたら、設定が正しく行われているか確認します。通常はデフォルトの設定で問題ありませんが、必要に応じて設定を調整できます。

設定ファイル（settings.json）に以下の設定が含まれているか確認します：

jsonコードをコピーする
{
  "editor.quickSuggestions": {
    "strings": true},
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    ["tw`([^`]*)", "(.*)"]
  ]
}

#4. VS Codeを再起動する

拡張機能をインストールし、設定を確認した後、VS Codeを再起動します。これにより、新しい設定が適用され、IntelliSenseが正しく動作するようになります。

#5. CSSファイルを確認する

Tailwind CSSの構文が正しく認識されることを確認します。例えば、以下のようなCSSファイルを作成し、エラーが表示されないことを確認します：

cssコードをコピーする
@tailwind base;
@tailwind components;
@tailwind utilities;

#まとめ

これで「Unknown at rule @tailwind」エラーが解消され、VS Code上でTailwind CSSのIntelliSenseが正しく動作するようになります。この拡張機能は、Tailwind CSSのクラス名の補完やドキュメントの表示など、多くの便利な機能を提供してくれるため、開発効率が大幅に向上します。

VS Codeの「Tailwind CSS IntelliSense」拡張機能を活用して、快適なTailwind CSS開発環境を構築しましょう。

タグ一覧