Get only CSS value of particular Tailwind CSS class

1
votes

Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer Motion, because framer motion animation object can accept a wide variety of CSS values like 1rem, #ff3322. Is there some kind of way to do something like this <motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />.

I know there exists twin.macro but it "returns" entire Tailwind CSS class. Is there a similar utility for getting only the value?

2
reactjstailwind-cssframer-motion

2 Answers

1
votes

I think xwind is what you are looking for.

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 converts your tailwind classes into Postcss-js / JSS compatible syntax. Something like this:

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

I prefer to use vscode and enable extension Tailwind CSS IntelliSense. This way, when you hover over any tailwind classes you can see the complete CSS.

enter image description here