Unable to configure CSS Nesting properly with Tailwind CSS

Question

<Slider
    {...settings}
    // style={{ cursor: "pointer", marginBottom: "10px" }}
    className={`${classes.services__slider} cursor-pointer mb-10 md:mb:0`}
>
    {youtubeVideos
        ?.filter((video) => video.id.videoId)
        ?.map((video) => (
            <div
                onClick={() =>
                    window.open(
                        `https://youtube.com/watch?v=${video.id.videoId}`,
                        "_blank"
                    )
                }
                style={{ padding: "10px" }}
                key={video.id.videoId}
            >
                <Image
                    src={video.snippet.thumbnails.medium.url}
                    height={0}
                    width={0}
                    sizes="100vw"
                    style={{
                        borderRadius: "20px",
                        marginBottom: "10px",
                        width: "100%",
                        height: "auto",
                    }}
                    alt={video.snippet.title}
                />
                <p>{video.snippet.title}</p>
                <p className="p-2.5 bg-[#171f38] w-fit text-xs text-white mt-2 rounded-md">
                    {new Date(video.snippet.publishTime).toDateString()}
                </p>
            </div>
        ))}
</Slider>

.services__container {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

.services__slider {
    button.slick-arrow {
        transform: scale(1.5);
    }
}

@media only screen and (max-width: 992px) {
    .services__container {
        flex-direction: column;
        align-items: unset;
    }

    .service__title h3 {
        font-size: 1.3rem;
    }
}

I'm using CSS modules along with Tailwind CSS classes in Slider className. But, if I try to use Nested CSS in services__slider class, it throws me this error:

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

And, if I follow all the steps shows in the docs, it causes issues with my dependencies and does not run the app.

I've tried replacing the postcss.config.js with the codeblock below and installing the postcss-nesting package:

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

npm install -D postcss-nesting

If anyone have faced this similar issue of Nested CSS, please help me fix this! Your support is highly appreciated!

Thanks

Answer 1

Using postcss-nested instead of postcss-nesting along with this configuration works for me:

"tailwindcss/nesting": {}