VS Code Errors and Warnings when using @tailwind directives

I have been using tailwindcss with laravel and laravel mix.

I am having kind of weird issue because everything is working fine but Visual Studio Code says that I have 10 errors and 3 warnings in my main.css file, and I am repeating the fact that everything is working, I am able to use the classes and the components I have created and npm run watch/dev is running as expected.

This is my Main.css file https://imgur.com/a/IyX99kY

You can see all the errors and warnings I am getting

And this is my webpack.mix.js file

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');


mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/main.css', 'public/css', [

        tailwindcss('resources/js/tailwind.config.js')
    ])

    .disableNotifications();

After everything I have tried, i am left to believe that there must be something built-in VS code that causing everything, any suggestion is appreciated!

tykus

6 years ago

Best Answer

Level 104

Tailwind directives are not valid CSS syntax; so VSCode is complaining. You can suppress unknown at rules warnings in the Lint setting for CSS.

You can go further and install the Stylelint extension and disabling CSS validation. You can Stylelint configure it to work with Tailwind:

module.exports = {
  rules: {
    'at-rule-no-unknown': [true, {
      ignoreAtRules: [
        'tailwind',
        'apply',
        'variants',
        'responsive',
        'screen'
      ]
    }],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null
  }
}

https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/

4 likes

Please or to participate in this conversation.