🚨

"Unknown at rule @tailwind"の警告を消す

2024/03/12に公開

症状

TailwindCSS導入の際、index.cssのようなメインのCSSファイルに以下のような記述を追加する作業があります。

index.css

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

私の場合、この部分に黄色い波線がひかれてUnknown at rule @tailwindという警告が出ていました。一応無視してもTailwind CSSは問題なく動いたのですが、警告が出ているのは気持ちの良いものではないので解決します。

対処は簡単で、PostCSS Language Supportという拡張機能をVSCodeに導入するだけです。エディタが@tailwindを正しく認識してくれるようになり、警告が消えます。

また、scssファイルに対してもこの拡張機能を適用させるにはsettings.jsonに、

"files.associations": { "*.scss": "postcss" }

という記述する必要があるみたいなので、必要に応じて適宜追記してあげてください。

恥ずかしながら最近知ったのですが、Tailwind CSS IntelliSenseという拡張機能を入れるとTailwind CSSがより使いやすくなるので、導入していない方はぜひ入れてみてください。