时间戳

首页 > 解决方案 > 仅获取特定 Tailwind CSS 类的 CSS 值

reactjs - 仅获取特定 Tailwind CSS 类的 CSS 值

问题描述

有没有办法只获取 Tailwind CSS 类的 CSS 值？例如，如果我有translate-x-4tailwind 类，我只想要1remCSS 值（因为 classtranslate-x-4是--tw-translate-x: 1rem;）。这对Framer Motion非常有用，因为 framer 运动动画对象可以接受各种 CSS 值1rem，如#ff3322. 有没有办法做这样的事情<motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />。

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

标签： reactjstailwind-cssframer-motion

解决方案

我认为xwind是您正在寻找的。

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 将您的顺风类转换为 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))"],
  },
};

推荐阅读