I am using Turborepo for the monorepo setup. I'm using the npm workspaces option to be specific. I want to use Tailwind CSS v4.0 for this project. I followed the steps as they said in the Tailwind CSS Next.js documentation, and it works. But the UI components that I export from the packages/ui directory are not able to use the Tailwind classes for some reason.

This is the repo url:

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 Tailwind CSS styles have not been applied. Tailwind CSS 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.

I am using Turborepo for the monorepo setup. I'm using the npm workspaces option to be specific. I want to use Tailwind CSS v4.0 for this project. I followed the steps as they said in the Tailwind CSS Next.js documentation, and it works. But the UI components 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/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 Tailwind CSS styles have not been applied. Tailwind CSS 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.

• next.js
• tailwind-css
• monorepo
• turborepo

2 Answers 2

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.

Adding on to Wongjn's answer, if you want the CLI to also work, your components.json will also need to be updated.

I have a turborepo template where there is a shared tailwind-config package, a react web app and a ui component. The changes I needed to make were:

apps
  ├─ web
  |   ├─ src
  |   |   └─ style.css        # change
packages
  ├─ ui
  |   └─ components.json      # change
tools
  ├─ tailwind
  |   ├─ style.css
  |   └─ package.json         # change

web/app/src/style.css

@import 'tailwindcss';

/* Added this line */
@import '@repo/tailwind-config/style.css';

packages/ui/components.json

This is only needed to use the CLI - if you are only copying/pasting code, there's no need to make any modification here.

{
  "tailwind": {
    // Remove old reference to tailwind.config.ts
    "config": "",
    "css": "../../tools/tailwind/style.css"
  },
}

At the time of writing, you also need to use the canary version of Shadcn's CLI, e.g.

npx shadcn@latest add button

tools/tailwind/package.json

Exporting the tools/tailwind/style.css shared config:

  "exports": {
    "./style.css": "./style.css"
  },

The full code is available at my repository below:

• https://github/nktnet1/rt-stack

Hope this was helpful!