Single Page
VS CodeでTailwind CSSのアットルールが構文エラーになった件

はじめに

ちょっと別のパソコンで開発環境を整える機会がありまして。

んでTailwind CSSをVS Codeで扱おうとした時に、@tailwind, @forward, @applyが構文エラーとして出てきたというお話。

「CSS公式のAt-rules(アットルール)に存在しないよ」と仰っておられる。

CSSで定義されているアットルールは、@charsetや@mediaなど、これで全部なので至極真っ当な警告文。

とは言えTailwind CSSで使うので、このエラーは邪魔なんですわ。

以前Windowsでは解決させた方法をとんと忘れてしまって、無駄に再調査する羽目になったので備忘録。

拡張機能のインストール

  • Tailwind CSS IntelliSense (@Tailwind Labs)

これだけで基本的には解決する。

Windows版は（多分）他に何もしてない。

MacOSになると次の設定も必要だったので、割とこっちが本題。

settings.jsonの編集

表示 コマンドパレットから、コマンドパレットを開く。

WindowsのショートカットキーはCtrl+Shift+P、MacOSはControl+Command+P。

「settings.json」と入力して、検索サジェスト項目の中から「基本設定: ユーザー設定を開く (JSON)」を選択して設定ファイルを開く。

"files.associations": {
  "*.css": "tailwindcss",
  "*.scss": "postcss"
}

こいつを追加してやるだけ。

PostCSS関連の拡張機能は不要でした。

プロジェクトを新しいウィンドウで開き直したらTailwindCSSの拡張アットルールは認識されるはず。

開き直さなくてもsettings.jsonを保存するだけで有効になるかもですが（私は有効になりましたが）念のために開き直しをしたよ。