Reactjs 仅获取特定顺风CSS类的CSS值

有没有一种方法可以只获取Tailwind CSS类的CSS值？例如，如果我有

translate-x-4

tailwind类，我只需要

1rem

CSS值。这将非常有用，因为帧运动动画对象可以接受多种CSS值，如

1rem

，

#ff3322

。有什么方法可以做这样的事情吗

我知道存在，但它“返回”整个Tailwind CSS类。是否有类似的实用程序仅用于获取值？

我更喜欢使用并启用扩展。这样，当您将鼠标悬停在任何tailwind类上时，都可以看到完整的CSS

我想这就是你要找的

import xw from "xwind";

const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;

Xwind将您的tailwind类转换为Postcss js/JSS兼容语法。 大概是这样的：

const styles = {
  "--text-opacity": "1",
  color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
  "&:hover": {
    "--text-opacity": "1",
    "--bg-opacity": "1",
    color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
    backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
  },
};

---

是的，我也使用它，但是我需要在我的代码中使用Tailwind CSS类的值，这样motion.div组件就可以设置动画了。扩展只显示CSS类。谢谢你的帮助。