Unable to use tailwindcss/nesting

[SJ-AW]

Versions

• tailwindcss: 3.4.17
• postcss: 8.4.49
• autoprefixer: 10.4.20
• webpack: 5.88.2
• postcss-nested: 7.0.2

Operating System

Windows, Linux

Describe your issue

I would like to use tailwindcss/nesting to add support for nested declarations. I use webpack, and my PostCSS configuration is as follows:

import tailwindNesting from 'tailwindcss/nesting'
import tailwind from 'tailwindcss'

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: __DEV__,
    postcssOptions: {
      plugins: [
        tailwindNesting,
        tailwind({
          ...tailwindConfig,
          content: [
            './src/client/**/*.{js,jsx,ts,tsx}',
            './dist/client/**/*.{js,jsx,ts,tsx}',
            './node_modules/aw-ui/components/**/*.{js,jsx,ts,tsx}',
          ],
        }),
        'autoprefixer',
      ],
    },
  },
}

No error appears, but I'm unable to use Tailwind classes.

However, if I use postcss-nested directly, I have no problem:

import tailwind from 'tailwindcss'

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: __DEV__,
    postcssOptions: {
      plugins: [
        'postcss-nested',
        tailwind({
          ...tailwindConfig,
          content: [
            './src/client/**/*.{js,jsx,ts,tsx}',
            './dist/client/**/*.{js,jsx,ts,tsx}',
            './node_modules/aw-ui/components/**/*.{js,jsx,ts,tsx}',
          ],
        }),
        'autoprefixer',
      ],
    },
  },
}

What's wrong with my setup?

[wongjn]

You could try calling tailwindNesting(). Otherwise consider providing a full example as a remotely-hosted git repository so we can test and debug more fully please.

[SJ-AW]

It's not working either.

Otherwise consider providing a full example as a remotely-hosted git repository so we can test and debug more fully please.

Yes, sorry, I know without the repository it's harder to help, but it's a private repo and it's really big, so I cannot share it. I will try to share a functional extract if I can...

[SJ-AW]

Eventually, I excluded Tailwind from my CSS modules, so I no longer need to use tailwindNesting().

[craigrileyuk]

For the late-comers:

The nesting PostCSS plugin is no longer inside the base tailwindcss package as of version 4, you need to install it separately.

pnpm add @tailwindcss/nesting

and then in your PostCSS config:

export default {
	plugins: {
		"@tailwindcss/nesting": {},
		"@tailwindcss/postcss": {},
	},
};

[dawnerd]

Docs really should be updated. When you search nesting it doesn't really make any mention of needing to do anything but I just spent a considerable amount of time trying to figure out why html had a hover state.