隐藏桌面/移动组件时出现 Tailwind 色彩渲染问题

Question

我目前正在使用 Tailwind CSS（和 Next JS）为桌面和移动视图开发一个卡片组件。为了处理响应式设计，我使用 Tailwind 的类（隐藏）在移动设备上隐藏桌面版本，反之亦然。

但是，我遇到了一个问题，即卡片组件内的 SVG 颜色无法正确显示。具体来说，正确的颜色仅显示在首先渲染的卡片上（移动设备），桌面上的颜色不会显示在屏幕上。

const Card = ({ card }: IProps) => {
  return (
    <>
      <CardMobile card={card} />
      <CardDesktop card={card} />
    </>
  );
};

const CardDesktop = ({ card }: IProps) => {
  return (
    <li className="hidden sm:block">
      <PolygonIcon />
    </li>
  );
};

const CardMobile = ({ card }: IProps) => {
  return (
    <li className="sm:hidden flex flex-col gap-4">
      <PolygonIcon />
    </li>
  );
};

SVG 内部有一些线性渐变，所以我猜这就是问题所在：

<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0712 18.8489C14.9804 18.8489 18.96 14.8693 18.96 9.96006C18.96 5.05086 14.9804 1.07117 10.0712 1.07117C5.16198 1.07117 1.18229 5.05086 1.18229 9.96006C1.18229 14.8693 5.16198 18.8489 10.0712 18.8489Z" fill="url(#paint0_linear_5_1947)"/>
<path d="M12.6362 11.8822L15.1511 10.4301C15.2843 10.3532 15.3667 10.2102 15.3667 10.0563V7.15235C15.3667 6.99882 15.2839 6.85546 15.1511 6.77851L12.6362 5.32637C12.503 5.24943 12.3379 5.24979 12.2047 5.32637L9.68984 6.77851C9.55664 6.85546 9.47425 6.99882 9.47425 7.15235V12.3421L7.71071 13.3602L5.94716 12.3421V10.3056L7.71071 9.28755L8.87394 9.959V8.59288L7.92629 8.04592C7.86096 8.00817 7.7862 7.98821 7.71034 7.98821C7.63449 7.98821 7.55972 8.00817 7.49475 8.04592L4.97991 9.49806C4.84671 9.57501 4.76432 9.71801 4.76432 9.8719V12.7758C4.76432 12.9293 4.84707 13.0727 4.97991 13.1497L7.49475 14.6018C7.62759 14.6784 7.79309 14.6784 7.92629 14.6018L10.4411 13.15C10.5743 13.0731 10.6567 12.9297 10.6567 12.7762V7.58643L10.6887 7.56828L12.4203 6.56837L14.1838 7.58643V9.62292L12.4203 10.641L11.2589 9.97025V11.3364L12.2047 11.8826C12.3379 11.9592 12.503 11.9592 12.6362 11.8826V11.8822Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_5_1947" x1="-2.06658" y1="2.53231" x2="16.2861" y2="13.7633" gradientUnits="userSpaceOnUse">
<stop stop-color="#A229C5"/>
<stop offset="1" stop-color="#7B3FE4"/>
</linearGradient>
</defs>
</svg>

有谁知道这个问题的解决方案以及发生这种情况的原因吗？

Answer 1

Tailwind 文档

：

默认情况下，Tailwind 使用移动优先断点系统，类似于您在 Bootstrap 等其他框架中可能使用的系统。

这意味着无前缀的实用程序（如

uppercase

）对所有屏幕尺寸都有效，而带前缀的实用程序（如

md:uppercase

）仅在指定的断点及以上生效。

示例中的

CardDesktop

将始终显示 -

hidden sm:block

的组合将始终导致

display: block

，因为

sm:block

匹配小屏幕

 及以上。

hidden 类基本上将被覆盖。

CardMobile

将始终隐藏，出于同样的原因 -

sm:hidden

也将匹配上面的所有屏幕尺寸。由于

flex

更通用，因此将使用更具体的规则，并且

flex

将被忽略。我想你正在寻找的是

const CardDesktop = ({ card }: IProps) => {
  return (
    <li className="block md:hidden">
      <PolygonIcon />
    </li>
  );
};

const CardMobile = ({ card }: IProps) => {
  return (
    <li className="hidden md:flex flex-col gap-4">
      <PolygonIcon />
    </li>
  );
};

这会将 

sm

视为默认样式，然后覆盖较大屏幕的基本样式。