顺风网格问题 React（响应式 col-span 显示在 HTML 中，但未按预期工作）

Question

我有一个网格应该做我想做的事。这是我所期望的行为的一个小问题。这取决于此响应代码：

col-span-3 md:col-span-2

，例如其中一项。

问题是这样的： 我检查了页面的 HTML，并且显示了我的动态断点 col-spans 。所以它应该按照我的预期进行。然而，当视口扩展时，他们并没有假设 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...`
  }

Answer 1

根据文档：

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

  到 Tailwind 类名称的字典：

  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]} …`}>
  

• 使用

  style

  属性来实现真正的动态属性：

  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}`,
        }}
      >
  

• safelist

  类，如果您的已知跨度数量有限：

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

Answer 2

看起来我们必须在渲染组件之前首先声明 class_names，并且 Tailwind 在清除并渲染到网站时会保留这些类。 这样，我们仍然可以使用 concat 字符串或文字模板。

let classNames = `grid gap-3 grid-cols-8 grid-cols-7 grid-cols-6 grid-cols-5 grid-cols-4 grid-cols-3 grid-cols-2`;

for(int i = 1; i<=8; i++)
    classNames = `grid gap-3 grid-cols-${i}`;

return(
    <div className={className}>
    // something
    </div>
);