How to add a @tailwind CSS rule to css checker

Question

Tailwind adds @tailwind css at rule which is flagged as unknown. How can I avoid this error?

eg styles.css

@tailwind preflight;

@tailwind utilities;

Answer 1

If you use VS Code you can use the following plugin: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Answer 2

This is the at-rule-no-unknown rule provided by vscode's built-in list.

In order to get rid of it you need to do the following:

1. Install stylelint extension code --install-extension stylelint.vscode-stylelint

2. Install stylelint recommended config npm install stylelint-config-recommended --save-dev

3. Add these two lines in your vscode USER SETTINGS

"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint
"scss.validate": false, // Disable scss lint (optional if using scss)

4. Paste these lines into a file called .stylelintrc in your project's root directory, create it if it does not exist. More information about stylelint's configuration follow this link: https://stylelint.io/user-guide/

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }],
    "block-no-empty": null,
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

Answer 3

Visual Studio Code allows you to define Custom Data for CSS Language Service.

For example, in your workspace’s .vscode/settings.json you can add:

{
  "css.customData": [".vscode/css_custom_data.json"]
}

And then in .vscode/css_custom_data.json add:

{
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind’s “Functions & Directives” documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
        }
      ]
    }
  ]
}

Note that you will have to reload the VS Code window for the change to be picked up.

Here is a copy of .vscode/css_custom_data.json, which contains all directives with short usage snippets (which in turn get syntax highlighted in vs code):

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

Here's a preview of the result:

The only directive missing is @apply, because it's declared at the CSS property level. The CSS Language Service probably doesn't expect atRules at the property level and won't pick up such directives.

Answer 4

My recommendation is to install postCSS language support and then rename tailwind.css to tailwind.pcss then change the references in your package.json scripts (or whatever build scripts you are using for tailwind) to tailwind.pcss from tailwind.css and everything should work fine.

@apply rule is compatible with postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

Answer 5

1. Just go to settings (ctrl + ,) for shortcut.
2. Search for CSS in the search bar.
3. look for the ( CSS> Lint:Unknown At Rules )
4. Select "Ignore" from the dropdown options.
That's all

Answer 6

SCSS

If you are using SASS with Tailwind, you will still see errors in your .scss files using these earlier answers to this question.

To properly lint SASS, you can add to your VS Code settings:

"scss.validate": false,

Follow the instructions by @hasusuf but turn off the default VS Code validator:

Add these 3 settings:

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

Answer 7

After many tests: POSTCSS and STYLUS syntax highlighter, removes warnings but CSS Intellisence is incomplete, does not show the first-utitilies classes Tailwind

I installed 'language-stylus' plugin, in VSCode

Settings> User setting:

"files.associations": {
   "* .css": "stylus"
 },

See you later!

CSS Intellisence is incomplete

Answer 8

I edited my .vscode/settings.json file by adding in "css.validate": false, seemed to work for me without installing external libraries.

https://github.com/Microsoft/vscode/issues/14999#issuecomment-258635188

Answer 9

just add three line into settings.json file

"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

Answer 10

Recommended VS Code Settings

Official Tailwind CSS IntelliSense VS Documentation

VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as @apply. You can disable this with the css.validate setting:

"css.validate": false

By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

"editor.quickSuggestions": {
  "strings": true
}

Combining both, your settings.json file (if new) will look similar to this:

{
    "css.validate": false,
    "editor.quickSuggestions": {
        "strings": true
      }
}

Source: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss