-
Classes on a className property inside an object aren't generated. I knew that tailwind wasn't picking these up with whatever extraction algorithm they use, I confirmed that by replacing the colon with an equal sign, and then vscode recognized them as tailwind classes, but obviously that's not the solution as it is a syntax error on javascript. What I'm using:React, typescript, vite, and tailwind. All with the latest versions. Example Code: return React.createElement(
TagName,
{
className:
"relative mx-auto inline-block h-[38px] font-bold leading-7 tracking-[2.29px] md:leading-[26px] uppercase hover:text-green duration-200",
...(href && { href }),
},
<>
{children}
<span className="absolute bottom-0 left-0 h-[2px] w-full bg-green" />
</>,
); My temp solution: const className =
"relative mx-auto inline-block h-[38px] font-bold leading-7 tracking-[2.29px] md:leading-[26px] uppercase hover:text-green duration-200";
return React.createElement(
TagName,
{
className,
...(href && { href }),
},
<>
{children}
<span className="absolute bottom-0 left-0 h-[2px] w-full bg-green" />
</>,
); |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
Seems to work in this Stackblitz reproduction of your code. Perhaps it is something else in your project? Could you provide a project that reproduces the unexpected behavior please? |
Beta Was this translation helpful? Give feedback.
-
Hi everyone ! |
Beta Was this translation helpful? Give feedback.
Seems to work fine for me, after changing back to the object syntax you had before:
Unfortunately, it seems like it could be something peculiar with your development environment that is stopping Tailwind from compiling the class rules, which is a lot harder to debug remotely 😅
Could it be that you are inquiring about the Tailwind Intellisense VSCode plugin? If so, you could try configuring the
tailwindCSS.experimental.classRegex
setting.