How to use Nuxt together with tailwind/nested using the PostCSS configuration object syntax instead of array syntax?

Viewed 202

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

0 Answers
Related