My current setup is Nuxt 2.15.7 and Tailwind 3.0.9 without "@nuxtjs/tailwindcss".
I'm trying to use the tailwindcss/nesting plugin to support the deep selector '>>>' - test-wise together with the postcss-nesting, as I can't get rid of the error:
(64:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
despite my configuration is set up correctly according to the Tailwind documentation:
build: {
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'tailwindcss': {},
'autoprefixer': {},
},
},
},
The only difference is, I'm using the object syntax, not the array syntax and 'postcss-import': true (tried 'postcss-import':{} as well)
Now I thought it may be working when I use the postcss-nesting dependency according to their docs:
build: {
postcss: {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss'),
require('autoprefixer')
]
}
}
This however leads to this error:
Cannot find module '0' .... /node_modules/@nuxt/core/dist/core.js
https://nuxtjs.org/docs/features/configuration/#postcss-plugins
How can I use this expression require('tailwindcss/nesting')(require('postcss-nesting')) together with the PostCSS Configuration Object Syntax