无法使用 Tailwind CSS 正确配置 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;
    }
}

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

检测到嵌套 CSS，但 CSS 嵌套尚未正确配置。 请在您的配置中启用 CSS 嵌套插件 before Tailwind。 请参阅此处：https://tailwindcss.com/docs/using-with-preprocessors#nesting

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

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

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

npm install -D postcss-nesting

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

谢谢

Answer 1

使用

postcss-nested

而不是

postcss-nesting

以及此配置对我有用：

"tailwindcss/nesting": {}