小编lin*_*ux2的帖子

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

我在 React 中使用 Tailwind CSS,并尝试为我的图像 div 设置 500px 的宽度。但div的宽度增加不会超过300px。

宽度设置为 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>

Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

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

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

Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

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

html css reactjs tailwind-css

9
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

html ×1

reactjs ×1

tailwind-css ×1