The latest articles on DEV Community by darkresq14 (@darkresq14). https://dev.to/darkresq14 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F502264%2F8f18c169-dd4a-4cd3-951b-e99edd40e05e.png https://dev.to/darkresq14 en darkresq14 Thu, 11 May 2023 13:56:50 +0000 https://dev.to/darkresq14/how-to-fix-unknown-at-rule-tailwindcss-cssunknownatrules-in-vs-code-mbh https://dev.to/darkresq14/how-to-fix-unknown-at-rule-tailwindcss-cssunknownatrules-in-vs-code-mbh <p>Have you ever included Tailwind CSS in your project just to be spammed by multiple warnings like <code>Unknown at rule @tailwind css(unknownAtRules)</code> ?<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hM9Zj4pX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxfa4ufudavuebzjjj3z.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hM9Zj4pX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxfa4ufudavuebzjjj3z.png" alt="Screenshot of VS Code with warnings" width="568" height="164"></a><br> A quick fix for this is to ignore them from the VS Code settings. Here is how to do it:<br> Open VS Code settings using your favorite way (I like to use the shortcut <code>Ctrl + ,</code>) and search for <code>css lint unknown at rules</code><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--f5INfCGj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a84rvnyr1s8sn5fesc7j.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--f5INfCGj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a84rvnyr1s8sn5fesc7j.png" alt="VS Code screenshot for the css linting settings set to warning" width="570" height="210"></a><br> The first (and only) option is <code>CSS &gt; Lint: Unknown At Rules</code> and the default for this is <code>warning</code>.<br> Set this option to <code>ignore</code>.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wQwIhnpF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lalnxdmwnkdvpys463ar.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wQwIhnpF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lalnxdmwnkdvpys463ar.png" alt="VS Code screenshot for the css linting settings set to ignore" width="366" height="114"></a><br> And we are done! No more warnings distracting us from coding.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hfyLDPmI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq0etpof3sfutzgw5pdc.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hfyLDPmI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq0etpof3sfutzgw5pdc.png" alt="Screenshot of VS Code without the warnings" width="457" height="159"></a></p> tailwindcss vscode webdev