How to fix unknownAtRules Warning

In my last post, we explored adding SCSS to a Next.js project that uses Tailwind CSS. While integrating these technologies enriches your project's styling, it may cause an unknownAtRules warning in your SCSS files. Let's dive into how you can resolve this warning seamlessly.

Understanding the unknownAtRules Warning

First, let's clarify what this warning is. The unknownAtRules warning is typically triggered by the CSS or SCSS linter not recognizing Tailwind CSS directives like @tailwind, @apply, etc. It's not an error with your code but rather a misunderstanding by the linter.

The Solution: Override Visual Studio Code Settings

The solution involves modifying the default Visual Studio Code settings for linting SCSS files:

1. Create a .vscode directory: If your project does not have a .vscode directory, create one at the root of your project.

2. Create a settings.json file: Inside the .vscode directory, create a new settings.json file.

3. Modify the settings.json file: Update the settings.json file to include the following code:

{ 
	"scss.lint.unknownAtRules": "ignore" 
}

This setting instructs Visual Studio Code to ignore unknown at-rules, effectively eliminating the unknownAtRules warning for your SCSS files.

By following this simple step, you'll remove the unknownAtRules warning in your Next.js project with Tailwind CSS and SCSS. While this warning doesn't prevent your code from running, maintaining a warning-free development environment leads to a more efficient coding experience. Happy coding!