Classes in an object aren't detected

[0x41-li]

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

[wongjn]

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?

[0x41-li]

Thank you for the response.

Strange.

Here's the project with the issue:

https://github.com/0x41-li/single-page-developer-portfolio

Note: it has the temp solution implemented, and the code is on the components/buttons/Primary.tsx file.

[0x41-li]

While working on the project, I still have the same issue, I think this is an issue because I used the default config, and I didn't alter anything, now even the temp solution has requirements, the variable name should be named exactly className, any other name won't make the classes' styles get generated.

[wongjn]

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.

[0x41-li]

Since it works on your side, it's definitely something on my dev env preventing Tailwind from compiling. 🫡

I want to thank you for your assistance, and your time.

I will check this more, and update this discussion if I find the root of the issue and solution.