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

Question

我在 React 中使用 Tailwind CSS，并尝试为我的图像 div 设置 500px 的宽度。但div的宽度增加不会超过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 时，框就消失了：

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

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

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

Answer 1

我遇到了类似的问题，我设法通过将自定义组件的目录包含在tailwind.config.js文件中来修复它：

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/sections/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  plugins: [],
}

现在，对我来说设置元素的高度<div>效果很好，例如：

import * as React from "react";
import Section from "../components/section";

const AboutSection = () => {
  return (
    <Section id="about">
      <div className="m-0 flex h-[384px] w-full flex-col p-0 md:h-[512px] lg:h-[640px] xl:h-[768px]">
        <h1>About Me</h1>
      </div>
    </Section>
  );
};

export default AboutSection;

Answer 2

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

所以你可以在tailwind.config.js文件中调整它的大小和自定义它，然后我们就可以像平常一样调用它。

自定义宽度示例： 注意：我将像素大小转换为 REM，其中 300 像素 = 18.75 REM。

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

高度的自定义示例： 注意：我将像素的大小转换为 REM，其中 300 像素 = 18.75 REM。

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