Nibelung Valesti Posts - Answer Overflow

Nibelung Valesti

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

So, I need to have a parent styled (background to blue) only when a child element is hovered. I've done this with Javascript, toggling class .hovered on parent upon hovering the child. Is there a better way to do this on tailwind css? Or another question is, with my solution, how do I implement tailwind? Right now Im using @apply to style children with .hovered on parent. But I'm aware that using @apply is not the best practice. Anyone help? Any tips?

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Slick slider inside a flex box

I have a slick-slider inside a two-column flexbox, but the slider is not respecting the parent container width, and I have to set its width to a certain value. Which is not good. I want it to be just 100% width of the parent. here is my markup, I'm using tailwind css:

<div class="flex max-w-[1000px]">
    <div class="basis-[480px]">
        <div class="slick-slider">
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
        </div>
    </div>
    <div class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, ipsam deleniti modi corrupti excepturi eius expedita inventore totam animi impedit laudantium temporibus veniam voluptatibus tenetur illum minus optio sed fuga.</div>
</div>

<div class="flex max-w-[1000px]">
    <div class="basis-[480px]">
        <div class="slick-slider">
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
            <img src="https://placehold.co/1500x1500" />
        </div>
    </div>
    <div class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, ipsam deleniti modi corrupti excepturi eius expedita inventore totam animi impedit laudantium temporibus veniam voluptatibus tenetur illum minus optio sed fuga.</div>
</div>

1 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 6/5/2024 in #front-end

Is it good practice to combine MUI and Tailwind css?

So I'm making a React app. And I like tailwind better than bootstrap, but I need the ready made components and icons. Is it considered good practice to use them both on the same project?

16 replies

Gaming

Programming