How to use Tailwind Nested Declarations with postcss.config.js without require()

Question

I'm trying to use nested declarations in Tailwind, so, in their docs they show postcss.config.js using require() from CommonJS:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

I need the same behavior, but in another format, not using the require() format, example:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

TheHippo · Accepted Answer · 2021-09-10 22:45:28Z

4

You need to install postcss-import via npm/yarn and then change your postcss.config.js to:

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

Also: When you use tailwindcss to transpile your CSS make sure you have the --postcss flag enabled.

edited Sep 10, 2021 at 22:45

answered Sep 10, 2021 at 22:36

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Günay Gültekin Over a year ago

what do you mean we should update start script by adding --postcss:true like that ? Thanks

Marcaum54 Over a year ago

TY man, after --postcss works ;)

slappy-x Over a year ago

same here, adding --postcss to "watch": "npx tailwindcss -i ./tailwind.css -o ./_SITE/_/css/tw.css --watch --postcss", in package.json fixed tailwind not processing nested rules. Thanks

Collectives™ on Stack Overflow

How to use Tailwind Nested Declarations with postcss.config.js without require()

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related