我有一個網格應該做我想做的。這是我所期望的行為。它依賴于這個響應代碼:col-span-3 md:col-span-2，例如其中一個項目。

問題是這樣的: 我檢查了頁面的HTML，顯示了我的動態斷點列。所以它應該在做我期望的事情。但是，當視口擴展時，它們不會采用md: col-span。可能是什么問題？

下面是我的組件的包裝器:

<div className="max-w-5xl">
        <div className="grid grid-cols-6 gap-10 p-6">
          {
            supportedArray.map((card, idx) => <SupportCard key={idx} {...card} />
          )}
        </div>
</div>

這是我的組件:

import { ISupportCard } from "~/types"

const SupportCard = (card: ISupportCard) => {
  return (
    <div className={`bg-white card shadow-xl aspect-[portrait] overflow-hidden rounded-t-xl rounded-b-3xl col-span-${card.mobileSpan} md:col-span-${card.colSpan} ${card.customClasses ?? ""}`}>
      <div className="relative">
        <img className={`w-full h-full object-cover ${card.imgClasses ?? ""}`} src={card.image} alt={card.alt_text ?? card.title} />
        <h3 className="absolute text-neutralBlack bottom-0 flex justify-center items-center text-lg md:text-2xl font-bold bg-[rgba(255,255,255,0.5)] w-full card-title p-3 backdrop-blur">{card.title}</h3>
      </div>
      <div className="relative card-body hidden md:flex flex-1">
        <p className="text-xl font-medium">{card.copy}</p>
      </div>
    </div>
  )
}

export default SupportCard

以下是傳入數據的形狀:

export interface ISupportCard {
  imgClasses?: string
  colSpan: number
  mobileSpan: number
  customClasses?: string
  title: string
  image: string
  alt_text?: string
  copy: string
}

這是其中一個物體:

{
    colSpan: 6,
    mobileSpan: 3,
    imgClasses: "aspect-square md:aspect-auto object-[40%] md:object-fill",
    title: "Organizations",
    image: "/images/cards/support-organizations.jpg",
    alt_text: "Organizations",
    copy: `Copy...`
  }

# # #根據文檔:

關于Tailwind如何提取類名，最重要的一點是，它只會找到在源文件中作為完整的完整字符串存在的類。

如果使用字符串插值或將部分類名連接在一起，Tailwind將找不到它們，因此不會生成相應的CSS:

不要動態構造類名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的例子中，字符串text-red-600和text-green-600不存在，所以Tailwind不會生成這些類。 相反，請確保您使用的所有類名都完整存在:

總是使用完整的類名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

您可以:

為col-span-*準備一個字典，以方便類名:

const SupportCard = (card: ISupportCard) => {
  const COL_SPANS = {
    1: 'col-span-1',
    2: 'col-span-2',
    // …
  };
  const MD_COL_SPANS = {
    1: 'md:col-span-1',
    2: 'md:col-span-2',
    // …
  };
  // …
  return (
    <div className={`… ${COL_SPANS[card.mobileSpan]} ${MD_COL_SPANS [card.colSpan]} …`}>

將樣式屬性用于真正的動態屬性:

const SupportCard = (card: ISupportCard) => {
  return (
    <div
      className={`… md:col-span-[--md-col-span] …`}
      style={{
        gridColumns: `span ${card.mobileSpan} / span ${card.mobileSpan}`,
        '--md-col-span': `span ${card.colSpan} / span ${card.colSpan}`,
      }}
    >

如果您的已知范圍數量有限，請將這些類列入安全列表:

module.exports = {
  safelist: [
    { pattern: /^col-span-[1-6]$/ },
    {
      pattern: /^col-span-[2-4]$/,
      variants: ['md'],
    },
    // …
  ],
  // …
];