How to use Tailwind (v4) with Prefix in Monorepo

[itisnas]

I'm working in a Turborepo monorepo with a shared UI component library (@acme/ui) and a Next.js app (web). I'm using Tailwind CSS v4 with a prefix (ui-) in my UI library to avoid class name conflicts, but the prefixed classes are not being generated/applied when the components are used in my main app.

Environment

• Tailwind CSS: v4
• Framework: Next.js (App Router)
• Monorepo: Turborepo
• Package Manager: [pnpm/npm/yarn - specify yours]

Setup

Structure

my-monorepo/
├── apps/
│   └── web/
│       └── src/
│           └── globals.css
└── packages/
    └── ui/
        └── src/
            ├── globals.css
            └── components/

packages/ui/src/globals.css

@import 'tailwindcss' prefix(ui);
@import './variables.css';
@import 'tw-animate-css';

@variant dark (&:where(.dark, .dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... other CSS variables ... */
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  /* ... other dark mode variables ... */
}

@theme {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  /* ... animations ... */
}

apps/web/src/globals.css

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

/* Shared UI library */
@import '@acme/ui/variables.css';
/* @import '@acme/ui/globals.css'; */ /* Tried both commented and uncommented */

@variant dark (&:where(.dark, .dark *));

:root {
  background-color: var(--background);
  color: var(--foreground);
}

@theme inline {
  --font-mulish: var(--font-mulish);
  /* ... other theme config ... */
}

Component Usage

In my UI library components, I use prefixed classes:

// packages/ui/src/components/Button.tsx
export function Button() {
  return (
    <button className="ui:bg-primary ui:text-white ui:px-4 ui:py-2 ui:rounded">
      Click me
    </button>
  );
}

In my main app, I import and use these components:

// apps/web/src/app/page.tsx
import { Button } from '@acme/ui';

export default function Home() {
  return (
    <div className="bg-blue-500 p-4"> {/* unprefixed classes */}
      <Button /> {/* Should use ui-* prefixed classes */}
    </div>
  );
}

Expected Behavior

The prefixed ui-* classes from my UI library components should be generated and applied, while unprefixed classes in my main app should also work normally.

Actual

Tailwind doesn't like the fact that I have @import 'tailwindcss' in multiple places.

Any guidance would be greatly appreciated!

[wongjn]

In your ui package, you'd want to specify a different base path like:

 /* globals.css */
-@import 'tailwindcss' prefix(ui);
+@import 'tailwindcss' prefix(ui) source("./components");
 @import './variables.css';
 @import 'tw-animate-css';

This should configure Tailwind to scan the UI package components.

However, you might still get conflicts between the two Tailwind imports since the are in the same "pipeline". You may need to separate them out like:

+import "@acme/ui/src/globals.css";
 import "./globals.css";

 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';

 /* Shared UI library */
-@import '@acme/ui/variables.css';

[itisnas]

Thank you. That did the job