Tailwind CSS动态类名异常：hover阴影不生效问题求助

问题原因 #

Tailwind CSS采用静态扫描机制生成样式，只有代码中明确写出的完整类名才会被编译。动态拼接的类名（比如hover:shadow-[5px_5px_50px_15px_${friendlink.theme_color}]）无法被静态识别，因此不会生成对应的hover阴影样式。

可行解决方案 #

方案1：使用CSS变量配合Tailwind静态类名

通过将动态颜色值存入CSS变量，再在Tailwind类名中引用该变量，既保留静态类名让Tailwind识别，又实现颜色动态化：

const RandomWebsite = ({ friendlink }) => {
  return (
    <div 
      className="w-10 h-10 hover:shadow-[5px_5px_50px_15px_var(--shadow-color)]"
      style={{ '--shadow-color': friendlink.theme_color }}
    ></div>
  );
};

原理：Tailwind能扫描到hover:shadow-[...]这个完整类名并生成CSS，而var(--shadow-color)会在运行时替换为动态传入的颜色值。

方案2：自定义CSS类+CSS变量

如果需要复用该样式，可在全局CSS中用@apply定义自定义类，再结合CSS变量：

/* globals.css */
.custom-hover-shadow {
  @apply w-10 h-10 hover:shadow-[5px_5px_50px_15px_var(--shadow-color)];
}

组件中使用：

const RandomWebsite = ({ friendlink }) => {
  return (
    <div 
      className="custom-hover-shadow"
      style={{ '--shadow-color': friendlink.theme_color }}
    ></div>
  );
};

方案3：JS事件控制内联样式

通过监听鼠标悬浮事件，手动切换内联样式，不依赖Tailwind的hover伪类：

import { useState } from 'react';

const RandomWebsite = ({ friendlink }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="w-10 h-10"
      style={{
        boxShadow: isHovered ? `5px 5px 50px 15px ${friendlink.theme_color}` : 'none'
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    ></div>
  );
};

内容的提问来源于stack exchange，提问作者ye qin