DEV Community

Muhamad Jamil
Muhamad Jamil

Posted on

6 3

Resolving problem with vue tailwind and postcss nesting

Previously I made an application with vue js and tailwind

because i'm used to using nesting feature in sass, i want to use it again in tailwind

quite simple, I just need to add the tailwindcss/nesting
plugin to postcss.config.js

Read More

here my postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

everything was working fine until i found that vscode reads nesting and @apply as error

After hours of searching for an answer I can finally draw a conclusion.

first i need to change the lang style in vue to postcss,
<style lang="postcss">

the error warning is gone, but the syntax highlighting is not showing, after reading the same problem on github https://github.com/johnsoncodehk/volar/issues/765

and after read this comment
https://github.com/johnsoncodehk/volar/issues/765#issuecomment-989442125

i replaced the postcss extension with https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss

All done, error warning gone and the syntax highlighting comeback

if you guys have the same problem and have another method to solve, feel free to share

thanks for reading

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (3)

Collapse
 
bgrand_ch profile image
Benjamin Grand

Thanks

Collapse
 
ryansantos profile image
Ryan Santos

Thanks ❤

Collapse
 
cn-2k profile image
cn-2k

Ty, works like a charm!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more