TanStackT
TanStack•10mo ago•
5 replies
sad-indigo

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 },
]


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.
Was this page helpful?