gpt4 book ai didi

html - Tailwind CSS 自定义宽度和高度不起作用,尽管可以使用直接 CSS 应用相同的值

转载 作者:行者123 更新时间:2023-12-05 05:43:21 48 4
gpt4 key购买 nike

我在 React 中使用 Tailwind CSS,我正在尝试为我的图像 div 设置 500px 的宽度。但是div的宽度不会增加超过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>

当我将自定义类中的宽度从 300px 更改为 500px 时,框就消失了:

enter image description here

如果我使用 CSS 手动调整宽度和高度,效果很好。

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

enter image description here

我不明白是什么导致了这个问题:(

最佳答案

顺风写下类似“w-[300px] h-[300px]”的格式,如果重复这样做,很可能无法阅读。因此,我认为你可以在tailwind.config.js文件中自定义宽度和高度。

因此您可以在 tailwind.config.js 文件中调整大小和自定义它,然后我们可以像往常一样调用它。

Example for custom width:注意:我将像素的大小转换为 REM,其中 300 像素 = 18.75 REM。

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

Custom example for height:注意:我将像素的大小转换为 REM,其中 300 像素 = 18.75 REM。

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

关于html - Tailwind CSS 自定义宽度和高度不起作用,尽管可以使用直接 CSS 应用相同的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71864704/

48 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com