Tailwind CSS custom width and height not working, although the same values can be applied using straight CSS

user_15209547 0
Viewed 2934

I am using Tailwind CSS in React and I am trying to set a width of 500px for my images div. But the width of the div does not increase more than 300px.

width set to 300px

<div className="flex flex-row gap-4 mb-12">

    <div className='images px-6 basis-0'>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

    </div>

    <div className='product_info basis-0'>
        ...
    </div>

</div>

When I change the width in the custom classes from 300px to 500px the boxes just disappear:

enter image description here

If I manually adjust the width and height using CSS, it works fine.

.img{
  width: 500px;
  height: 300px;
}

enter image description here

I don't understand what is causing this issue :(

tailwind-css reactjs css html
3 Answers

In a tailwind writing a format like "w-[300px] h-[300px]" will most likely be unreadable if done repeatedly. Therefore, I think you can customize the width and height in the tailwind.config.js file.

So you can resize and customize it in the tailwind.config.js file, and then we can call it like tailwind as usual.

Example for custom width: Note: I converted the size of the pixels to REM, where 300 pixels = 18.75 REM.

module.exports = {
   theme: {
     extend: {
       widths: {
         '76': '18.75rem',
       }
     }
   }
}

Custom example for height: Note: I converted the size of the pixels to REM, where 300 pixels = 18.75 REM.

module.exports = {
   theme: {
     extend: {
       height: {
         '76': '18.75rem',
       }
     }
   }
}
user_181399530

I just started learning tailwind, but it should be something link this when referring to height and width:

<div class="w-96 ..."></div>

Here is a reference

In the case of React's inline styling it would be:

<div className="w-96 ..."></div>

Also with the div not changing you have the basis set at 0, when it should be more than that, I use the x/12 option as it breaks it down into a 12 column format for sizing. So maybe try 6/12 and have your second container set to the difference (6/12), thats if you want it even:

<div className="flex flex-row gap-4 mb-12">

<div className='images px-6 basis-6/12'>

    <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
    </div>

    <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
    </div>

    <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
    </div>

</div>

<div className='product_info basis-6/12'>
    ...
</div>

Here is a reference for basis

user_98668040

Instead of using those Arbitrary values, you can customize your theme by simply doing

module.exports = {
  theme: {
    extend: {
      width: {
        '76': '18.75rem',
      }
    }
  }
}

That way you can use it everywhere on your code. You can also add them to an external CSS file.

Always avoid using Arbitrary values.

Hope this helps.

user_143515800
Related