Tailwind v4 — prefix() in monorepo not generating some variant classes

[ihatem]

Hi,

I’m running Tailwind CSS v4 in a Turborepo monorepo with this structure:

/* packages/tailwind-config/shared-styles.css */
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* packages/ui/src/styles/globals.css */
@import "tailwindcss" prefix(ui);
@import "@repo/tailwind-config";

/* apps/dashboard/src/app/globals.css */
@import "@repo/tailwind-config";
@import "@repo/ui/globals.css";

Minimal reproduction

MyParent.tsx in packages/ui:

import React, { PropsWithChildren } from "react";
import { cn } from "@/lib";

type Props = React.HTMLAttributes<HTMLDivElement> & PropsWithChildren<{}>;

export function MyParent({ children, className, ...props }: Props) {
  return (
    <div className={cn("ui:group", className)} {...props}>
      {children}
    </div>
  );
}

Usage in apps/dashboard (none of these classes is working):

<MyParent>
  <div className="group-hover:bg-yellow-400 ui:group-hover:bg-yellow-400 group-hover:ui:bg-yellow-400">
    hello
  </div>
</MyParent>

Result:
Only .group-hover:bg-red-400 is generated, nothing for .ui:group-hover:bg-red-400

...
@media (hover: hover) {
  .group-hover\:bg-yellow-400:is(:where(.group):hover *) {
    background-color: var(--color-yellow-400);
  }
}
...

---

Expected

Variant classes with the ui: prefix (e.g. ui:group-hover:bg-red-400) should be generated when the app uses them.

Actual

Only the non-prefixed variants are generated (e.g. .group-hover\\:bg-red-400).
No CSS is generated for .ui\\:group-hover\\:bg-red-400 or other prefixed variants.

---

What I tried

• Added @source in packages/ui/globals.css to scan both the UI package and the app
• Imported tailwindcss/utilities with prefix(ui)
• Verified that non-variant classes with ui: work (e.g., ui:bg-red-400)
• But all prefixed variants (e.g., ui:group-hover:*, ui:peer-focus:*) are missing from the output
• No errors in build logs, just missing rules

---

Question

• Is this a known limitation with Tailwind v4’s prefix() in a monorepo?
• Do I need to configure something special so that prefixed variants are generated across packages?
• Or is this currently unsupported and should I avoid prefixing for variants?

If needed I can share a minimal repro repository.

[wongjn]

I think it's because you're importing Tailwind twice:

1. In packages/ui/src/styles/globals.css, it has @import "tailwindcss" prefix(ui);, so prefix is activated.
2. After that, it has @import "@repo/tailwind-config";
3. In packages/tailwind-config/shared-styles.css, it also has @import "tailwindcss";. This overrides the previous @import, removing the prefix.

[ihatem]

I think it's because you're importing Tailwind twice:

1. In packages/ui/src/styles/globals.css, it has @import "tailwindcss" prefix(ui);, so prefix is activated.
2. After that, it has @import "@repo/tailwind-config";
3. In packages/tailwind-config/shared-styles.css, it also has @import "tailwindcss";. This overrides the previous @import, removing the prefix.

Thanks for the suggestion, but unfortunately that doesn’t fix it.

I tried keeping only:

/* apps/dashboard/src/app/globals.css */
@import "tailwindcss";

and in

/* packages/ui/src/styles/globals.css */
@import "tailwindcss" prefix(ui);

while completely removing

@import "tailwindcss";

from packages/tailwind-config/shared-styles.css.

It still doesn’t work — I think the reason is that Tailwind is compiled independently inside each package/repo. So when I’m in apps/dashboard, group-hover:bg-yellow-400 works, but ui:group-hover:bg-yellow-400 does not, because in the app build Tailwind has no knowledge of the prefixed ui:group variant coming from packages/ui.

I do acknowledge that if I do this, it works:

<MyParent className="group">
  <div className="group-hover:bg-yellow-400">
    hello
  </div>
</MyParent>

But the goal is to be able to override / target parent classes coming from packages/ui without having to manually add group in the consuming app.