Published on

How to Add @tailwind CSS Rule to CSS Checker

Authors
  • Name
    Ripal & Zalak
    Twitter

How to Add @tailwind CSS Rule to CSS Checker

The @tailwind directive is a critical part of Tailwind CSS, enabling the inclusion of base, components, and utilities styles. However, many developers encounter warnings or errors in their CSS checkers (like VS Code) when using this directive.

This guide explains step-by-step how to fix this issue and prevent such warnings while maintaining an optimal development workflow.

Why Does This Error Occur?

CSS checkers often flag @tailwind as an unknown at-rule because it’s a custom directive used by Tailwind’s tooling and is not natively recognized by standard CSS parsers.

Solutions to Fix the @tailwind Directive Error

1. Install Tailwind CSS IntelliSense

The simplest and most robust solution is to install the Tailwind CSS IntelliSense extension for Visual Studio Code. This extension provides:

  • Autocompletion for Tailwind classes.
  • Syntax highlighting for the @tailwind directive.
  • Elimination of CSS validation warnings.
Steps:
  1. Open Visual Studio Code.
  2. Go to the Extensions Marketplace (Ctrl + Shift + X).
  3. Search for "Tailwind CSS IntelliSense" and click Install.

2. Update VS Code Settings

You can configure VS Code to recognize Tailwind-specific syntax by updating your workspace or user settings.

Steps:
  1. Open the command palette (Ctrl + Shift + P) and search for Preferences: Open Settings (JSON).
  2. Add the following to your settings.json file:
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

This setting ensures all .css files are treated as Tailwind CSS files, enabling proper validation and IntelliSense support.

3. Use a Custom CSS Lint Configuration

If you’re using a CSS linter like Stylelint, you can configure it to ignore Tailwind directives.

Steps:
  1. Create a .stylelintrc file in your project’s root directory.
  2. Add the following configuration:
{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind", "apply", "layer", "variants", "responsive", "screen"]
      }
    ]
  }
}

This setup tells the linter to ignore Tailwind-specific at-rules.

4. Use PostCSS Language Support

For better compatibility, install the PostCSS Language Support extension and associate your .css files with PostCSS.

Steps:
  1. Install the PostCSS Language Support extension.
  2. Add the following to your settings.json file:
{
  "files.associations": {
    "*.css": "postcss"
  }
}

This approach works well if you’re also using PostCSS in your build process.

FAQ

Q1: Can I ignore the warning instead of fixing it?

Yes, you can suppress the warning by adding the following setting:

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

However, this method disables validation for all unknown at-rules, which might not be ideal for production environments.

Q2: What if I’m using SCSS or other preprocessors?

For SCSS, you can disable validation by adding:

{
  "scss.validate": false
}

Alternatively, use PostCSS and convert your SCSS files accordingly.

Q3: Does this affect CSS IntelliSense for other projects?

If you’re concerned about breaking CSS IntelliSense in non-Tailwind projects, consider using a workspace-specific settings.json file under the .vscode folder of your project.

Related Resources