Question 45858 in CSS Question posted in
Some basic documentation can be found here.

Tailwind Width: 0px; automatically added to style property of div – CSS

I am making a web application using Next.JS and Tailwind for styling. I would like to map over some "accords" for a perfume giving them each variable widths by reading the size property of each accord which is a string. I am interpolating this into the Tailwind class of each div like so:

className={`text-center w-${accord.size} rounded-r-2xl`}

I also have a style property which does not involve a width:

style={{ backgroundColor: accordsData[accord.accord].color }}

When this code is rendered in the browser it returns the correct class for each div however widths are not rendered because it automatically adds width: 0px; to the style:

<div class="text-center w-100 rounded-r-2xl" style="background-color: rgb(204, 51, 0); width: 0px;">...</div>

I would like my application to not add this extra style and to instead use the width from the Tailwind class.

Any help is greatly appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was being silly, I forgot to mention I am also using Framer Motion and so I uncovered with some debugging that the width was being set to 0 by that.


  2. 0

    Are you adding width values that are included in tailwind’s default width settings? Or do you have a custom width set up in your tailwind.config.js file?

    If you don’t and you’re trying to set an arbitrary value you could look at Tailwind’s documentation.

    According to the documentation of Tailwind:

    Arbitrary values
    If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

    <div class="w-[32rem]">
  <!-- ... -->
</div>

    You would include your width in the [] like so:

    <div class={`w-[${accord.size}]`}>
  <!-- ... -->
</div>

    Hope this helps!

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

Back To Top
Search