how to use css nesting in .vue files with tailwindcss/nesting

[Mr-Nobody-li]

my postcss config like this

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  },
}

in my .vue files, got error } expectedcss(css-rcurlyexpected) for > p { margin-bottom: 10px; } , how to resolve it?

...
<style scoped>
.detail-box {
  margin: 40px 0 0;
  > p {
    margin-bottom: 10px;
  }
}
</style>

[wongjn]

Consider:

• Adding lang="postcss" to the <style> tag.
• Ensuring PostCSS has been set up for the Vue build system.

[Mr-Nobody-li]

Does vite support lang="postcss" ?
It seems that there is no mention in vite source code that lang could be postcss

const enum PreprocessLang {
  less = 'less',
  sass = 'sass',
  scss = 'scss',
  styl = 'styl',
  stylus = 'stylus',
}

[wongjn]

Vite supports PostCSS: https://vitejs.dev/guide/features.html#postcss.

[Mr-Nobody-li]

You are right, vite supports postcss, such as postcss.config.js, and my project is also using it because tailwind. I used lang=postcss in the project without any errors, and css also takes effect, only need to install a syntax highlighting plugin