Rails で TailwindCSS を導入してみたところ、application.tailwind.css
のTailwindCSS読み込み部分(@tailwind)でエラー表示が。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-1.png)
最初は読み込みエラーかなと思ったんですが、CSSはちゃんと適用されているし、色々と調べてた結果、エディタ(VSCode)上の問題であることが発覚。
一応、エラー表示が出ていても正常に読み込めますが、正常なのにエラーが表示されているのはちょっと気持ち悪いですし、本物のエラーと区別がつきにくくなると後々困る。
ということで、早速エラー表示への対応を行いました。
当記事はその対処法をまとめた覚え書きです。
「@…」のエラー表示を消す方法
「@…」という書き方をした理由は、今回のエラー表示が「@tailwind」付近だけではなかったからです。
後述しますが、まずは「@tailwind」付近のエラー表示対策を行っていきます。
【対処法その1】TailwindCSS を @import “…” で読み込む
Railsで新規アプリ作成時に--css tailwind
オプションを付けてTailwindCSSを導入した場合、デフォルトでapplication.tailwind.css
が自動生成されます。
そして、ファイルの中身は以下のように記述されています↓
@tailwind base;
@tailwind components;
@tailwind utilities;
これで@tailwindのCSSを読み込んでいるのですが、VSCode上ではこれらの記述がエラーと見なされてしまうようです。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-1.png)
そこで、tailswindのCSSを@importで読み込むよう設定すればエラー表示は消えます(公式ドキュメントの手順通りに設定)。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-4.png)
ただし、ここで一つ問題があります。
それは、カスタムコンポーネントを追加した場合です。
例えば、custom_components.css
というカスタムコンポーネント用のCSSを追加で作成、application.tailwind.css
にインポートしたとします。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-5.png)
カスタムコンポーネント(カスタムクラス)を作成する場合、以下のように@apply
を用いてコンポーネント化します。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-6.png)
そして、VSCode上ではこの@applyに対してもエラー表示をしてしまいます。
そこで、次の対処方法です。
【対処法その2】VSCodeに「PostCSS Language Support」プラグインをインストールする
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-3.png)
VSCodeのプラグインインストールメニューから「PostCSS Language Support」をインストールし、有効化します。
必要であれば再起動してください。
すると、先ほどのエラー表示が消えました。
![](https://plog.kobacchi.com/wp-content/uploads/2022/09/visual-studio-code-css-error-7.png)
これでスッキリしました ね。
以上です。
参考資料
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNzExODc0JTJGcHJvZmlsZS1pbWFnZXMlMkYxNjIyMDgyNTY2P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTgxMDcyNGUxODQ1ZjBiNzU3NjcwOGY4NDgyM2U2YzY4%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D0b12fb63d34b940ca71b537e1ca4813d?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9VGFpbHdpbmQlMjBDU1MlRTMlODElQTclNDB0YWlsd2luZCVFOCVBOCU5OCVFOCVCRiVCMCVFNiU5OSU4MiVFMyU4MSVBQlZTJTIwQ29kZSVFMyU4MSVBNyVFMyU4MiVBOCVFMyU4MyVBOSVFMyU4MyVCQyVFMyU4MSU4QyVFNSU4NyVCQSVFMyU4MiU4QiVFMyU4MSVBOCVFMyU4MSU4RCVFMyU4MSVBRSVFNSVBRiVCRSVFNSU4NyVBNiVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWI5OGM4MDMxMTBkMjc0OGZkMjcwOGRjNmYwOGUwYzRk&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBoaXJvY2hhbiZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWZiY2Y0YWU3MTVkZDdjNzYxMWE2ZDUwYWI1ODE5MmRm&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=d52e540bf481fbcdc2d3c62f93679f17)
![](https://devsakaso.com/wp-content/uploads/2021/05/a26373e7ca19302f6e460d881512b96c.png)
コメント