Tailwind Color Classes在NextJS和React Vite中单击按钮时无法正常工作

所以我有一个组件，基本上演示了Tailwind + React中的“文本渐变”效果。我有4个选择下拉菜单和一个“随机”按钮。单击按钮或从下拉列表中选择任何内容后，将预览更改。
现在，我第一次遇到了一个问题，颜色类没有被正确应用。我的意思是，它们确实出现在标记的className属性中--但是这些类很少在屏幕上实现。未应用的颜色也不会显示在开发工具->样式边栏中。

我已经录制了一个2分钟的视频-在这里：https://streamable.com/3auz04

正如你所看到的，我试图不断地生成结果，大多数时候，文本是透明的/没有颜色被应用。
现在-我知道你一定认为，也许类是错误的？在任何时候，如果我复制类并转到play.tailwindcss.com-它都有效。

<h2 class="bg-gradient-to-r from-pink-700 via-yellow-800 to-lime-500 bg-clip-text text-center text-7xl font-bold text-transparent">Whats Up</h2>

字符串
下面是一个在PreviewText.jsx中不起作用的类的例子--但是在play.tailwindcss.com上起作用--基本上证明了Tailwind类没有任何问题。
下面是我的相关代码：
梯度使用状态变量：

const [gradient, setGradient] = useState({
direction: "bg-gradient-to-tl",
fromColor: "from-slate-800",
viaColor: "via-violet-500",
toColor: "to-zinc-400",

});

型
RandomizeGradient函数：

const randomizeTextGradient = () => {
    const randomDirection =
      gradientDirections[Math.floor(Math.random() * gradientDirections.length)]
        .value;
    const randomFromColor =
      fromArray[Math.floor(Math.random() * fromArray.length)].value;
    const randomViaColor =
      viaArray[Math.floor(Math.random() * viaArray.length)].value;
    const randomToColor =
      toArray[Math.floor(Math.random() * toArray.length)].value;

    const newGradient = {
      direction: randomDirection,
      fromColor: randomFromColor,
      viaColor: randomViaColor,
      toColor: randomToColor,
    };

    setGradient(newGradient);
      };

型
TextGradient.tsx:

<section className="text-white bg-transparent border-t border-b border-zinc-800 my-6">
    <div className="py-4 mx-auto flex items-center gap-4 justify-between">
      <div className="flex gap-2">
        <button
          className="focus:outline-none p-2 bg-zinc-900 border rounded-md border-zinc-700 hover:bg-zinc-700"
          onClick={randomizeTextGradient}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="w-5 h-5 text-white"
            fill="#fff"
            viewBox="0 0 256 256"
          >
            <path d="M197.67,186.37a8,8,0,0,1,0,11.29C196.58,198.73,170.82,224,128,224c-37.39,0-64.53-22.4-80-39.85V208a8,8,0,0,1-16,0V160a8,8,0,0,1,8-8H88a8,8,0,0,1,0,16H55.44C67.76,183.35,93,208,128,208c36,0,58.14-21.46,58.36-21.68A8,8,0,0,1,197.67,186.37ZM216,40a8,8,0,0,0-8,8V71.85C192.53,54.4,165.39,32,128,32,85.18,32,59.42,57.27,58.34,58.34a8,8,0,0,0,11.3,11.34C69.86,69.46,92,48,128,48c35,0,60.24,24.65,72.56,40H168a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V48A8,8,0,0,0,216,40Z"></path>
          </svg>
        </button>
        <CopyToClipboard
          text={`${gradient.direction} ${gradient.fromColor} ${gradient.viaColor} ${gradient.toColor} bg-clip-text text-transparent`}
          onCopy={() => setShowNotification(true)}
        >
          <button className="focus:outline-none p-2 bg-zinc-900 border rounded-md border-zinc-700 hover:bg-zinc-700">
            <svg
              className="w-5 h-5 text-blue-500"
              fill="#fff"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 14"
            >
              <path d="M9.782.72a4.773 4.773 0 0 0-4.8 4.173 3.43 3.43 0 0 1 2.741-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.934-2.865 3.137-3.921-.969 1.379-2.44 2.207-4.259 1.231C14.488 3.365 13.551.6 9.782.72ZM4.8 6.979A4.772 4.772 0 0 0 0 11.151a3.43 3.43 0 0 1 2.745-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.933-2.865 3.137-3.921-.97 1.379-2.44 2.208-4.259 1.231C9.51 9.623 8.573 6.853 4.8 6.979Z" />
            </svg>
          </button>
        </CopyToClipboard>
      </div>
      <div className="flex items-center gap-4">
        <div className="relative">
          <div className="">
            <select
              value={gradient.direction}
              onChange={(e) =>
                setGradient((prevGradient) => ({
                  ...prevGradient,
                  direction: e.target.value,
                }))
              }
              className="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-white shadow-sm ring-1 ring-inset border-none ring-zinc-700 focus:outline-none focus:ring-2 sm:text-sm sm:leading-6"
            >
              {gradientDirections.map((direction, index) => (
                <option key={index} value={direction.value}>
                  {direction.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        {/* do the same for other selects */}
        <div className="relative">
          <div className="">
            <select
              value={gradient.fromColor}
              onChange={(e) =>
                setGradient((prevGradient) => ({
                  ...prevGradient,
                  fromColor: e.target.value,
                }))
              }
              className="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-white shadow-sm ring-1 ring-inset border-none ring-zinc-700 focus:outline-none focus:ring-2 sm:text-sm sm:leading-6"
            >
              {fromArray.map((gradient, index) => (
                <option key={index} value={gradient.value}>
                  {gradient.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="relative">
          <div className="">
            <select
              value={gradient.viaColor}
              onChange={(e) =>
                setGradient((prevGradient) => ({
                  ...prevGradient,
                  viaColor: e.target.value,
                }))
              }
              className="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-white shadow-sm ring-1 ring-inset border-none ring-zinc-700 focus:outline-none focus:ring-2 sm:text-sm sm:leading-6"
            >
              {viaArray.map((gradient, index) => (
                <option key={index} value={gradient.value}>
                  {gradient.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="relative">
          <div className="">
            <select
              value={gradient.toColor}
              onChange={(e) =>
                setGradient((prevGradient) => ({
                  ...prevGradient,
                  toColor: e.target.value,
                }))
              }
              className="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-white shadow-sm ring-1 ring-inset border-none ring-zinc-700 focus:outline-none focus:ring-2 sm:text-sm sm:leading-6"
            >
              {toArray.map((gradient, index) => (
                <option key={index} value={gradient.value}>
                  {gradient.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div>
        <PreviewText gradient={gradient} />
  </div>

型
如果你好奇的话，这里是我如何生成类的：

const colors = [
    "slate",
    "gray",
    "zinc",
    "neutral",
    "stone",
    "red",
    "orange",
    "amber",
    "yellow",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "blue",
    "indigo",
    "violet",
    "purple",
    "fuchsia",
    "pink",
    "rose",
  ];

  const numbers = [100, 200, 300, 400, 500, 600, 700, 800, 900];

  let fromArray = [];
  let viaArray = [];
  let toArray = [];

  colors.forEach((color) => {
    numbers.forEach((number) => {
      let fromValueLabel = `from-${color}-${number}`;
      let viaValueLabel = `via-${color}-${number}`;
      let toValueLabel = `to-${color}-${number}`;
      fromArray.push({ value: fromValueLabel, label: fromValueLabel });
      viaArray.push({ value: viaValueLabel, label: viaValueLabel });
      toArray.push({ value: toValueLabel, label: toValueLabel });
    });
  });

型
我已经试着修复这个2天了，但没有运气。如有帮助，不胜感激。我已经在NextJS和React Vite中测试了这段代码。

Tailwind Color Classes在NextJS和React Vite中单击按钮时无法正常工作

1条答案

相关问题

热门标签

最新问答