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

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 :(

htmlcssreactjstailwind-css


Solution 1:[1]

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 = {
   themes: {
     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 = {
   themes: {
     extend: {
       height: {
         '76': '18.75rem',
       }
     }
   }
}

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fuad Zein
Solution 2

Related Questions