Question 42789 in Html Question posted in
Some basic documentation can be found here.

Variable behaviour from tailwindCSS's sizing in a React project – Html

I have this rather simple piece of html + tailwind CSS that keeps breaking in my React app.

In Tailwind Play it looks exactly like I want it to (simplified here but it still has the behavior I want with all my HTML generated by react copied to TailwindPlay): https://play.tailwindcss.com/QzEtC4jITX

but in my React app it looks like this :

Red Circle missrendering

The confusing thing is that it used to work well but now it’s broken for some reason and I’ve not touched that piece of code.

Any idea what might be causing this behaviour ? Thank you

Edit : additional clue – I’m pretty sure it’s a React related bug since I had it working again but by rebooting my app it broke again, here’s the code for my react component I use :

export default function Bomb({size = 60, word = 'Bomb'}) {
    return (
        <div class={`h-${size} w-${size} bg-red-500 rounded-full`}>
            <span class="inline-flex h-full w-full items-center justify-center text-3xl">{ word }</span>
        </div>
    )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Changing the code to a version that didn't used props and back to the props version fixed it. Probably some Vite/React optimization messing up something ? Anyways, I can now restart it without having it break. But still, very weird behaviour...

    export default function Bomb({size = 60, word = 'Bomb'}) {
    return (
        <div class={`h-${size} w-${size} bg-red-500 rounded-full`}>
            <span class="text-3xl inline-flex items-center justify-center h-full w-full">{ word }</span>
        </div>
        // <div class="h-60 w-60 bg-red-500 rounded-full">
        //     <span class="text-3xl inline-flex items-center justify-center h-full w-full">{ word }</span>
        // </div>
    )
}

  2. 0

    I just tried this on my React app. It is working fine.

    Kindly copy-paste the tailwindcss play code to your code and check it gently with what you have.

    There might be a wrongly typed code in the width and height of the div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search