How to enable tailwindcss v4.0 for the packages/ui components in a turborepo?

I am using turborepo for the monorepo setup. I'm using the npm workspaces option to be specific. And I wanted to use tailwindcss v4.0 for this project. I followed the steps as they said int he tailwindcss nextjs documentation, and it works. But the ui componenets that I export from the packages/ui directory are not able to use the tailwind classes for some reason.

This is the repo url: https://github.com/HarshalGunjalOp/payment-wallet

I created a component called appbar.tsx in the packages/ui directory:

//    ./packages/ui/appbar.tsx
import { Button } from "./button";

interface AppbarProps {
    user?: {
        name?: string | null;
    },
    // TODO: can u figure out what the type should be here?
    onSignin: any,
    onSignout: any
}

export const Appbar = ({
    user,
    onSignin,
    onSignout
}: AppbarProps) => {
    return <div className="flex justify-between border-b px-4">
        <div className="text-lg flex flex-col justify-center">
            PayTM
        </div>
        <div className="flex flex-col justify-center pt-2">
            <Button onClick={user ? onSignout : onSignin}>{user ? "Logout" : "Login"}</Button>
        </div>
    </div>
}

And I'm importing it in my apps/user-app/app/page.tsx:

"use client"
import { signIn, signOut, useSession } from "next-auth/react";
import { Appbar } from "@repo/ui/appbar";

export default function Page() {
  const session = useSession();
  return (
   <div>
      <Appbar onSignin={signIn} onSignout={signOut} user={session.data?.user} />
   </div>
  );
}

This is the output image:

As you can see in the image, the tailwindcss styles have not been applied. Tailwindcss is working in the user-app, but when I import something from the packages/ui folder, the component I imported doesn't seem to be styled using tailwind.

Thank you for your time.

It seems like Tailwind does not automatically scan the UI package's files. You'd need to tell it to.

Using @source directly

You could include in apps/user-app/app/globals.css:

@source "../../../node_modules/@repo/ui";

This tells Tailwind to scan the UI package files but exposes implementation details of turbo management.

Using a CSS @import

You could abstract the @source into the UI package's own CSS:

/* packages/ui/styles.css */
@source "./";

/* packages/ui/package.json */
"exports": {
  …
  "./styles.css": "./styles.css"
}

/* apps/user-app/app/globals.css */
@import "tailwindcss";
@import "@repo/ui/styles.css";

Little more complicated but more modular.