无法使用 Tailwind CSS 正确配置 CSS 嵌套

问：

<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;
    }
}

我在 Slider className 中使用 CSS 模块和 Tailwind CSS 类。但是，如果我尝试在services__slider类中使用嵌套 CSS，它会抛出以下错误：

检测到嵌套 CSS，但未正确配置 CSS 嵌套。 请在配置中启用 Tailwind 之前的 CSS 嵌套插件。 在这里查看操作方法：https://tailwindcss.com/docs/using-with-preprocessors#nesting

而且，如果我按照文档中显示的所有步骤进行操作，它会导致我的依赖项出现问题并且无法运行该应用程序。

我尝试用下面的代码块替换postcss.config.js并安装postcss嵌套包：

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

npm install -D postcss-nesting

如果有人遇到过类似的嵌套CSS问题，请帮我解决这个问题！非常感谢您的支持！

谢谢