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

Question

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.

Answer 1

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.