如何从HTML向tailwind.config.js传值？Tailwind自定义属性配置

没法直接从HTML给tailwind.config.js传运行时的值。tailwind.config.js是项目构建阶段执行的静态配置，等页面在浏览器加载渲染的时候，Tailwind早就根据配置生成好最终的静态CSS文件了，构建阶段根本读取不到页面运行时才写在HTML标签上的变量。

你要的动态传值效果不需要硬往配置文件传值，直接在keyframes配置里用CSS自定义属性就能实现，和你写原生CSS用var()的逻辑完全一致。

实现步骤 #

1. 修正tailwind配置（你原来的配置里keyframes放错层级了，要放在extend块下才能正确被Tailwind识别扩展），在需要动态传值的位置直接引用CSS变量，还可以加默认值兜底：

module.exports = {
  extend: {
    animation: {
      scroll: 'scroll 25s linear infinite'
    },
    keyframes: {
      scroll: {
        '0%': { transform: 'translateX(0%)' },
        '100%': { transform: 'translateX(var(--variable-number, 20)%)' },
      }
    }
  },
}

这里var(--variable-number, 20)的意思是优先读取元素上定义的--variable-number变量值，如果没定义就默认用20作为参数。

2. HTML里正常给目标元素加类名和行内样式传值就行，和你之前写原生CSS的写法完全一样：

<div class="animate-scroll" style="--variable-number: 20">Test</div>

如果不同元素需要不同的滚动距离，直接修改对应元素行内样式里的变量值即可，比如传-50、100都能正常生效，不需要修改Tailwind配置、也不需要重新执行构建。

注意点 #

• 这种写法是Tailwind原生支持的，不需要安装任何第三方插件
• 所有CSS变量支持的传值格式都能正常解析，不管是数值、带单位的长度值都可以
• 动画类名要加对，Tailwind里配置的animation.scroll对应的类名是animate-scroll，不要漏写前缀

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