Issue with Tailwind Variants in a Turborepo Monorepo

[ryanalencar]

I'm building a design system in a Turborepo monorepo, where I have multiple packages:

• tailwind (shared Tailwind config)
• ui-core (shared components and variants)
• ui-web (React)
• ui-native (React Native)

My goal is to centralize Tailwind Variants (tv) inside ui-core so both ui-web and ui-native can use the same styles. However, when I import a variant-defined component from ui-core into ui-web, the generated Tailwind class strings are not applied correctly.

For example, I import the button variant like this:
import { button } from '@sportyme/ui-core/components/button';

Then, inside my WebButton component, I use it as follows:

const { base, label } = button({
  variant,
  size,
  disabled,
  loading,
  className,
});

But the styles don't seem to work as expected. Has anyone encountered issues with Tailwind Variants in a monorepo setup? Could this be related to how Tailwind is resolving class names across packages? Any guidance would be appreciated!

This is the base tailwindcss config that I use in my ui-web package:
darkMode: 'class', content: ['./src/**/*.{ts,tsx}'], theme: { extend: { colors, spacing, borderRadius, }, },