VS CodeにPostCSS Language SupportをインストールするだけだとCSSのコードヒントが使えなくなる

PostCSS Language Supportとは

PostCSS Language Supportとは、VS CodeでモダンなPostCSS言語をサポートするための拡張機能です。

例えば、VS CodeでTailwind CSSを扱うと、PostCSSに対応していないため、@tailwind baseなどをコード内に書くと「Unknown at rule @tailwind」というエラーが表示されてしまいます。

そのため、VS CodeでTailwind CSSを使用する際は「PostCSS Language Support」のVS Code拡張機能をインストールするよう推奨している記事をよく見かけます。

記事タイトルにも書いた通り、PostCSS Language SupportをインストールするだけではCSSのコーディング時にコードヒントが使えなくなるという問題が発生します。

この問題はsettings.jsonに以下の設定を追記することで解決できます。

settings.json

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

VS CodeでTailwind CSSを使い始めた人なら誰もが遭遇する問題なので、あらかじめ対処法を知っておくと良いです。