Nibelung Valesti Posts - Answer Overflow

Nibelung Valesti

Posts Comments

KPCKevin Powell - Community

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

Two Column Layout, but the other one goes to edge.

7 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 9/21/2024 in #front-end

Make a Background repeat smooth

Hi guys, can anyone share how they make background repeat smoothly? I have an image with repeated background but the edges of it doesnt repeat smoothly.

42 replies

KPCKevin Powell - Community

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

one sided slanted button

18 replies

KPCKevin Powell - Community

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

Make Tailwind Desktop First

I have set my tailwind configuration to be desktop first:

screens: {
        xl: { max: "1279px" },
        // => @media (max-width: 1279px) { ... }
        sm: { max: "639px" },
        // => @media (max-width: 639px) { ... }
        md: { max: "767px" },
        // => @media (max-width: 767px) { ... }
        lg: { max: "1023px" },
        // => @media (max-width: 1023px) { ... }
      },

screens: {
        xl: { max: "1279px" },
        // => @media (max-width: 1279px) { ... }
        sm: { max: "639px" },
        // => @media (max-width: 639px) { ... }
        md: { max: "767px" },
        // => @media (max-width: 767px) { ... }
        lg: { max: "1023px" },
        // => @media (max-width: 1023px) { ... }
      },

But the problem is that tailwind generates the ouput from smaller screens first to larger. Making Larger screens overwrite smaller ones, which defeats the purpose. Has anyone ever tried making tailwind generate large screen first? Thank you.

12 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/4/2024 in #os-and-tools

Automatically deploy local files to server on change? (Currently just using filezilla)

Can anyone suggest me a tool to automatically push my local changes to like an ftp file? I'm using Tailwind with WordPress and my client is telling me to work on the files that are uploaded in the server via FTP, and we are only using FileZilla, but I need to build my tailwind locally as well. Any suggestions/tools to automate this, or make the workflow better?

20 replies

KPCKevin Powell - Community

•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