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

Nhan · Accepted Answer · 2023-08-25 07:13:23Z

0

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

"tailwindcss/nesting": {}

answered Aug 25, 2023 at 7:13

Nhan

3,9356 gold badges35 silver badges41 bronze badges

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

2 Comments

Prathamesh Chavan Over a year ago

I tried with postcss-nested but, it doesn't solve the issue. Thanks for your response!

Max Pekarsky Over a year ago

Note that if you're in CRA, it totally ignores your postcss config file: github.com/tailwindlabs/tailwindcss/discussions/…

Collectives™ on Stack Overflow

Unable to configure CSS Nesting properly with Tailwind CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related