T
TanStack•6mo ago
adverse-sapphire

Tailwind v4 + pnpm + turbo

I have a monorepo using tailwind v4, pnpm and turbo repo. Currently I have split my webprojects into a folder called domains and all my shared elements inside packages. Since v4 uses a css file, I have a package called styling that exports a app.css file with all my themeing and vars which I can then consume in all of my start domains by using the following piece of code. 
import appCss from '@monorepo/styling/app.css?url'

export const RootLinks = [
  { rel: 'stylesheet', href: appCss },
]
import appCss from '@monorepo/styling/app.css?url'

export const RootLinks = [
  { rel: 'stylesheet', href: appCss },
]
This works great and my theme is easily shared and I can consume the variables inside the domains. The Bad I have additionally created 4 separate UI packages named form components charts typography Each one of these bundles should also consume the styling from the monorepo app.css file. My initial thought was that the components exported from each of these packages would be able to correctly consume the classes once they are imported into the domains. This is not the case. My second attempt is to import the app.css file in each of the components however this too does not work.
2 Replies
extended-yellow
extended-yellow•6mo ago
I'm try to understand the context... so: the other packages you are consuming in your main repository are not receiving the tailwind classes, is it? Did you config a postcss.config (for each package) and install correct dependencies?
adverse-sapphire
adverse-sapphireOP•6mo ago
I have figured it out Inside my start project I was initially linking my app.css right from the package itself. The correct way was to create a new styles.css inside each app (domain) and then add all the packages and then add that styles.css to tanstack start so for example if this is the folder structure 
/apps
    /website 
/packages
    /components
    /styling 
    /utils
/apps
    /website 
/packages
    /components
    /styling 
    /utils
Then inside website I need a styles.css file with the following 
@import '@monorepo/styling/app.css';

@source '../node_modules/@monorepo/components';
@source '../node_modules/@monorepo/utils';
@import '@monorepo/styling/app.css';

@source '../node_modules/@monorepo/components';
@source '../node_modules/@monorepo/utils';
import {styles} from '.styled.css?url'

export const RootLinks: (
    | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>
    | undefined
)[] = [
    { rel: 'stylesheet', href: styles },
]
import {styles} from '.styled.css?url'

export const RootLinks: (
    | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>
    | undefined
)[] = [
    { rel: 'stylesheet', href: styles },
]

Did you find this page helpful?