仅获取特定 Tailwind CSS 类的 CSS 值

Posted 2023-03-06

【中文标题】仅获取特定 Tailwind CSS 类的 CSS 值

【英文标题】：Get only CSS value of particular Tailwind CSS class

【发布时间】：2021-04-21 11:59:30

【问题描述】：

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

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

【参考方案1】：

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

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))"],
  ,
;

【参考方案2】：

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

【讨论】：

是的，我也使用它，但我需要在我的代码中使用 Tailwind CSS 类的值，以便motion.div 组件可以动画。该扩展仅显示 CSS 类。感谢您的帮助。