React中Tailwind JIT与变量结合实现translate-y失效问题咨询

核心原因 #

Tailwind CSS是静态分析型的CSS工具，它在项目构建阶段只会扫描代码里明确写出的完整类名，然后生成对应的CSS样式。你用字符串拼接方式生成的hover:translate-y-[-10%]，在静态扫描时Tailwind只能看到零散的字符串片段，无法识别出完整的类名，自然不会生成对应的hover平移样式，所以代码不生效。而直接写死的hover:translate-y-[-10%]是完整的类名，能被Tailwind正常识别并生成样式。

解决办法 #

• 方法一：使用模板字符串的动态值语法
  Tailwind支持在类名中用模板字符串插值，只要插值内容是明确的静态值，就能被识别：

  <img
    src={project.image.fields.file.url}
    className={`hover:translate-y-[${10}%]`}
  />
  

• 方法二：在Tailwind配置中自定义类名
  如果需要复用这个平移值，可以在tailwind.config.js里扩展主题，提前定义好对应值：

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        translate: {
          'neg-10': '-10%',
        },
      },
    },
  }
  

  之后直接使用预定义的类名：

  <img
    src={project.image.fields.file.url}
    className="hover:translate-y-neg-10"
  />
  

• 方法三：使用自定义CSS类
  若需要更灵活的动态控制，也可以直接写自定义CSS类实现hover平移：

  <style jsx>{`
    .hover-up {
      transition: transform 0.2s ease;
    }
    .hover-up:hover {
      transform: translateY(-10%);
    }
  `}</style>
  <img
    src={project.image.fields.file.url}
    className="hover-up"
  />
  

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