Manipulating React Slick classes with Tailwind CSS

Is there any way to make this possible? I have a project in Next 13 which is styled with Tailwind CSS. The homepage has several React Slick sliders which I need to manipulate (margins, overflow...), and which look like this:

<ul className="md:min-w-[500px] w-full">
      <Slider {...settings}>
        {subcategoryItems.map((item) => (
          <li
            key={item?.node.id}
            className="flex flex-col"
          >
           {CONTENT}
          </li>
        ))}
      </Slider>
</ul>

So I can't see HTML elements and classes (slick-slider, slick-list, slick-slide, slick-active...) of React Slick to change them directly by entering Tailwind CSS classes.

In the same folder of every component, I have {ComponentName}.module.css file. And this is two ways that I have tried to access those React Slick classes via .module.css file:

1st attempt

*Component.jsx

import styles from "./{Componentname}.module.css";

<ul className={`${styles.sliderWrap} md:min-w-[500px] w-full`}>
   {Slider}
</ul> 

-First variant of targeting CSS classes:

*Component.module.css

.sliderWrapper .slick-slider .slick-list .slick-track{
    @apply my-[0] mx-[20];
}

-Second variant of targeting CSS classes: *Component.module.css

.sliderWrapper .slick slider{
    @apply my-[0] mx-[20];
}

But it was not working, even after adding "!important":

@apply my-[0] mx-[20] !important;

Chrome dev tools were not showing these properties at all!

2nd attempt

*Component.jsx

import styles from "./{ComponetName}.module.css";

<ul id={`${styles.sliderWrap}`} className={`md:min-w-[500px] w-full`}>
    {Slider}
</ul>

-First variant of targeting CSS classes:

*Component.module.css

#sliderWrapper .slick-slider .slick-list .slick-track{
    @apply my-[0] mx-[20];
} 

-Second variant of targeting CSS classes:

#sliderWrapper .slick slider{
    @apply my-[0] mx-[20];
}

Also, both variants were not working, even after adding "!important":

@apply my-[0] mx-[20] !important;

And Chrome dev tools were not showing these properties at all.

3rd attempt

Added class to react-slick settings then tried to style via that class.

*Component.jsx

const settings = {
    className: "sliderWrapper"
}

*Component.module.css

.sliderWrapper .slick-list .slick-track{
    @apply my-[0] mx-[20];
}

4th attempt

Added class to a Component element via ClassName, and then tried to access slider classes via it like in previous examples, but it was not working.

*Component.jsx

<ul className="sliderWrapper w-full">
    {Slider}
</ul>

To be clear, I managed to manipulate these React Slick classes via "Styled Component", but my manager told me that I have to be consistent with technologies, and solve this with Tailwind CSS because it is possible.

I'm unsure if there is any way to solve this with a tailwind.config.s file. Any help is welcome Im stuck on this for the third day...

Let me answer to my own question because I have found solution.

At parent component build some class with which you can access to react-slick classes. For example:

<ul className={`${styles.sliderWrapper} md:min-w-[500px] w-full`}>
  <Slider {...settings}>
    {subcategoryItems.map((item) => (
      <li
        key={item?.node.id}
        className="flex flex-col"
      >
       {CONTENT}
      </li>
    ))}
  </Slider>
</ul>

Then in .module.css file use that class and global selector :global to overwrite slick slider classes.

.sliderWrapper :global .slick-list .slick-track{
   @apply my-[0] mx-[20];
}