Monorepo UI package has no styling when imported
I have a monorepo (turborepo) with a Next.js app and a UI package. In this UI package I have a Shadcn UI button component. I export this button using an index.tsx file. When importing this button in the Next.js app, all properties and interaction are fine, but all styling is missing. Any ideas?
Postcss config and Tailwind config are imported/used as preset from the @repo/ui package.
@repo/ui has autoprefixer, postcss and tailwind as devDependencies. My Next.js app only installs @repo/ui
![No description](https://cdn.answeroverflow.com/1197078743429169172/image.png)
![No description](https://cdn.answeroverflow.com/1197078743643082896/image.png)
![No description](https://cdn.answeroverflow.com/1197078743861182464/image.png)
![No description](https://cdn.answeroverflow.com/1197078744058318999/image.png)
36 Replies
Where are you importing a stylesheet?
My Next.js app has a globals.css file with the ShadcnUI CSS variables
And the @tailwind things
https://github.com/niebag/turborepo-starter/tree/feat/ui
you have to export the tailwind file from the ui app
the CSS one?
yeah
under packagelock in ui package, add the css file under exports tag
and import it as
ui/css_file
just like any other css fileand what about the components?
should they be in exports aswell
cause i cant seem to make it work with "main" or "types"
yeah in exports too
most libraries have a tree
like an index that imports from components, and components/index that exports all components
huge export tunnel
and then you just add index under exports
and boom it go brr
and you cant rly do hmr between packages btw
so u have to build ui library again / have watch mode on postcss
and then restart the main app using it
its kinda gay
so more like this;
packages/ui/src/components/atoms/index.tsx
packages/ui/src/index.tsx
which is what made me say fuck this im only using it in 1 app anyways
my brain is not braining with all the folders but seems right lol
xd
but how does that make a tree tho?
as it is still referenced from an index
yes index is root
this will not result into
import { Button } from '@repo/ui/atoms'
right
not sure what a better practice is anywayif exports "." is set to this file then repo/ui would be it afaik
i meant files not exports
oh wait no nvm