how to fix tailwind styling not loading from ui/src

[cell0901]

Summary

So i initialized a turborepo with next app.
followed this guide to add tailwind to my next-app in /apps. https://tailwindcss.com/docs/installation/framework-guides/nextjs
now when i do styling directly inside the page.tsx it works fine. but when i add components inside theui/srcfolder and import it to page.tsx the text and everything shows but the style inside the className"" doesnt shows up

Additional information

this is my postcss.config.mjs

`const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;`

imported tailwind in globals.css as well 
`@import "tailwindcss";`

this is the component inside the ui/src folder 
Appbar.tsx
'import { Button } from "./button";

interface AppbarProps {
    user?: {
        name?: string | null;
    },
    // TODO: can u figure out what the type should be here?
    onSignin: () =>void , // mean i my type will take function and its doesnt care what it returns
    onSignout:() =>void 
} 

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">
            PayZoo
        </div>
        <div className="flex flex-col justify-center pt-2">
            <Button onClick={user ? onSignout : onSignin}>{user ? "Logout" : "Login"}</Button>
        </div>
    </div>
}'

Example

No response

[SametDulger]

Hi cell0901,

The issue where Tailwind styles work inside your page.tsx but not on components imported from ui/src in a Turborepo setup usually comes down to how Tailwind processes your CSS and which files it scans for class names.

Here are some common causes and fixes:

Tailwind’s content (or purge) config missing ui/src
Tailwind needs to know all the paths where you use class names. Since your components are in ui/src (outside the Next.js app folder), you must include that path in your tailwind.config.js under the content array. For example:

module.exports = {
  content: [
    './apps/your-next-app/app/**/*.{js,ts,jsx,tsx}',
    './ui/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: { /* your theme config */ },
  plugins: [],
}

Without this, Tailwind won’t generate styles for classes used in ui/src.

PostCSS and Tailwind config shared or duplicated?
Make sure that PostCSS and Tailwind configs are correctly loaded and used by your Next.js app, and that ui/src doesn’t have conflicting or missing configs.

CSS import scope
Importing globals.css with Tailwind directives into your Next.js app’s root layout or _app.tsx is the right approach. You don’t need to import CSS inside ui/src components.

Verify build and watch setup
If you are running a dev server, ensure changes inside ui/src trigger rebuilds and Tailwind picks up new class names. Sometimes you need to restart the server after changing Tailwind config.

Summary:
Add ./ui/src/**/*.{js,ts,jsx,tsx} to the content array in tailwind.config.js of your Next.js app and restart the dev server. This should fix missing styles on imported components.

[cell0901]

actually i downgraded to tailwind v3 and also added this ui export in my tailwind config. now its working. i was using react 18.2.0 maybe that could be the case(most probably not) or i should have tried adding the tailwind config.
But yh thanks for helping out