我在React中使用了Tailwind CSS，并試圖為我的圖片設(shè)置500像素的寬度。但是div的寬度不會(huì)增加超過300像素。

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

當(dāng)我將自定義類的寬度從300px更改為500px時(shí)，這些框就消失了:

如果我使用CSS手動(dòng)調(diào)整寬度和高度，它工作正常。

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

我不明白是什么導(dǎo)致了這個(gè)問題:(

我也遇到過類似的問題，我通過在tailwind.config.js文件中包含我的自定義組件的目錄來解決這個(gè)問題:

/** @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: [],
}

現(xiàn)在，我來設(shè)定& ltdiv & gt元素工作正常，例如:

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;

除了使用那些任意的值，您還可以通過簡(jiǎn)單的

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

這樣，您就可以在代碼的任何地方使用它。 您也可以將它們添加到外部CSS文件中。

始終避免使用任意值。

希望這有所幫助。

在順風(fēng)寫下一種格式，如& quotw-[300像素]h-[300像素]& quot；如果重復(fù)進(jìn)行，很可能無法閱讀。所以我覺得可以在tailwind.config.js文件中自定義寬度和高度。

所以你可以在tailwind.config.js文件中調(diào)整大小和自定義它，然后我們就可以像平常一樣調(diào)用它了。

自定義寬度示例: 注意:我將像素的大小轉(zhuǎn)換為雷姆，其中300像素= 18.75雷姆。

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

高度的自定義示例: 注意:我將像素的大小轉(zhuǎn)換為雷姆，其中300像素= 18.75雷姆。

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

不久前我也遇到了類似的問題，我已經(jīng)解決了。你可以試試這段代碼，也許它能解決這個(gè)問題。

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

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

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

剛開始學(xué)順風(fēng)，但提到高度和寬度應(yīng)該是這樣的:

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

這里有個(gè)參考。

對(duì)于React的內(nèi)聯(lián)樣式，它應(yīng)該是:

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

同樣，在div不變的情況下，您將基數(shù)設(shè)置為0，當(dāng)它應(yīng)該大于0時(shí)，我使用x/12選項(xiàng)，因?yàn)樗鼘⑺纸鉃?2列格式以進(jìn)行調(diào)整。因此，也許嘗試6/12，并讓您的第二個(gè)容器設(shè)置為差異(6/12)，如果你想它甚至:

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

</div>

這里有一個(gè)參考依據(jù)。