从html传递值到tailwind.config.js文件?(Css自定义属性顺风)?

Question

是否可以将一个值从html传递到tailwind.config.js文件?

我基本上想做类似于我们如何通过从HTML, CSS使用使用自定义属性值。而是将它传递给tailwind.config.js文件。

例如，对于HTML和CSS你可以这样做:

.fill-color {
color: var(--color);
}
<div class="fill-color" style="--color: blue;">Test</div>

，但在我的项目中，我需要通过一个变量，如:20从index.html文件:

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

所以我可以使用它来正确设置关键帧百分比:

module.exports = {
extend: {
animation: {
scroll: 'scroll 25s linear infinite'
}
},
keyframes: {
scroll: {
'0%': {transform: 'translateX(0%)'},
'100%': {transform: 'translateX(NEED 20 VALUE HERE%)' },
}
},
}

Answer 1

是的，您可以做您想要实现的，查看这个playground的工作示例。只要把var(--percentage)加到translateX。

HTML:

<div class="animate-text-scroll" style="--percentage: 20%">Test</div>

顺风配置:

module.exports = {
theme: {
extend: {
keyframes: {
'scroll': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(var(--percentage))' },
},
},
animation: {
'text-scroll': 'scroll 2s linear infinite',
},
},
},
plugins: [],
}

希望对你有帮助。

Answer 2

您可以使用自定义css变量和任意值来实现这一点。

这是一个演示:https://play.tailwindcss.com/qEqKUVP8IQ

发生了什么:

首先，我们在配置中定义自定义关键帧和动画。允许它读取CSS变量，如下所示:

extend: {
keyframes: {
scroll: {
'0%': {transform: 'translateX(0)'},
'100%': {transform: 'translateX(var(--scroll-distance))' },
}
},
animation: {
scroll: 'scroll 1s linear infinite'
},
},

则可以在类命名中使用任意值，如下所示:

<div class="animate-scroll [--scroll-distance:20px]">Test</div>
<div class="animate-scroll [--scroll-distance:50px]">Test</div>

相同的动画，但在多个元素上自定义距离。

另一个选择是在css文件中定义一个默认值，像这样:

:root {--new-variable: red;}

并在元素

上使用

<div class="bg-[color:var(--new-variable)]">Test</div>

希望对你有帮助。