Tailwind CSS + VueJS single file component and VS Code integration

Question

How to properly configure Tailwind CSS and VS Code to at least disable errors about at-rule and empty tag error inside VueJS single file component (vue-cli)?

<template>
...
</template>

<style lang="scss">
  body {
    // } expected
    @apply font-source pt-4;
  } // at-rule or selector expected

  h5,h4,h3,h2,h1 {
    // } expected
    @apply font-pt font-bold;
  } // at-rule or selector expected
</style>

disable the es-lint may it works

Hammad tariq
– Hammad tariq

2019-05-09 15:56:28 +00:00
Commented May 9, 2019 at 15:56 — Hammad tariq
– Hammad tariq, Commented May 9, 2019 at 15:56
lol I don't want to disable es-lint lint.

RomkaLTU
– RomkaLTU

2019-05-09 15:59:36 +00:00
Commented May 9, 2019 at 15:59 — RomkaLTU
– RomkaLTU, Commented May 9, 2019 at 15:59
then keep es-lint

Hammad tariq
– Hammad tariq

2019-05-09 16:05:29 +00:00
Commented May 9, 2019 at 16:05 — Hammad tariq
– Hammad tariq, Commented May 9, 2019 at 16:05

rene anderson · Accepted Answer · 2020-06-08 21:54:40Z

8

I got it working with the help of this guide

TLDR

Install VS Code plugin stylelint (publisher name: stylelint)
Disable scss / css validation for the project. Hit F1 and search "settings json".

settings.json

"scss.validate": false
"css.validate": false

Add and configure stylelint plugin. Add the following file and contents to your project root.

stylelint.config.js

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

(optional) You "may" need to restart vs code to see the changes

answered Jun 8, 2020 at 21:54

rene anderson

812 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3875913 Over a year ago

Anyone in the future, if your validation settings are already false and you are still experiencing the problem, setting them to true then back to false worked for me.

boylec1986 · Accepted Answer · 2024-01-03 18:57:47Z

0

You could also add this to your VS Code workspace settings (.vscode/settings.json):

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

answered Jan 3, 2024 at 18:57

boylec1986

6096 silver badges16 bronze badges

Comments

Sandro Das Neves · Accepted Answer · 2019-05-29 17:56:15Z

-1

maybe remove lang="scss" or use the class directly in the template should work ?

answered May 29, 2019 at 17:56

Sandro Das Neves

11 silver badge4 bronze badges

1 Comment

Andre Figueiredo Over a year ago

OP is using SCSS, there's the issue. Removing it or changing to lang="postcss" breaks CSS.

destiner · Accepted Answer · 2021-09-24 08:35:07Z

-1

I fixed this error by changing my style's lang attribute to "postcss". Tailwind is essentially a PostCSS plugin.

<style lang="postcss">

answered Sep 24, 2021 at 8:35

destiner

663 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS + VueJS single file component and VS Code integration

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related