Syntax highlighting

[benface]

First of all, thank you so much for this.

It would be cool if not only the linter didn't mark Tailwind's "additions" to CSS as invalid (for instance it doesn't like @apply .some-class, complaining with [css] identifier expected), but to go one step further and highlight @apply and the utilities following it. Similarly, config() could be highlighted the same way other CSS "functions" such as calc() are.

I don't know if that's possible, but if it is, it would make this awesome extension even better. :) Thanks!

EDIT: I forgot to mention @tailwind and @screen.

[bradlc]

Hey Benoît, thanks for the feedback!

I’m not sure you can extend syntax definitions like that. I might be wrong though. I think you’d have to define a brand new "language," which I don’t really want to do.

I use this extension and then set VS Code to associate CSS files with PostCSS: "files.associations": { "*.css": "postcss" } If you do that it won’t complain about the syntax you mentioned.

Alternatively you can disable the built-in CSS validation: "css.validate": false

[benface]

I use this extension and then set VS Code to associate CSS files with PostCSS: "files.associations": { "*.css": "postcss" } If you do that it won’t complain about the syntax you mentioned.

Hmm, I don't think that's gonna work for me, as I'm also using Sass (.scss files) with Tailwind.

No big deal. Thank you for your quick response :)

[bradlc]

Okay so I misspoke earlier 😅 apologies!

You can actually do this.

Before:

After:

[bradlc]

Although, after some digging I still can’t find a way around the validation issue.

If you require validation I would recommend disabling the built-in validation, and using stylelint instead, which allows defining custom at-rules.

In terms of syntax highlighting.. how do you imagine the class names after an @apply looking?

[benface]

If you require validation I would recommend disabling the built-in validation, and using stylelint instead, which allows defining custom at-rules.

Nice, I will look at that, thanks!

In terms of syntax highlighting.. how do you imagine the class names after an @apply looking?

Maybe similar to how they appear in a selector?

[bradlc]

Before:

After:

What do you think?

[benface]

Looks perfect! :)

[bradlc]

Sweet! This is released now so let me know if you run in to any issues :)

[benface]

Re-closing this, everything seems to work well :) Thanks again