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
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
GitHub
with-esbuild-react-lib/packages/ui at main · barrybtw/with-esbuild-...
Contribute to barrybtw/with-esbuild-react-lib development by creating an account on GitHub.
this is some garbage i did a while ago
so after every change in dev you need to restart your dev server?
is what made me abandon the idea
or, after every change in ui package, main app has to restart dev server like i said
and ui package has to build output css file
thats crazy
no its not
its a seperate package and bundling is a pain in the ass
i mean yea it makes sense but DX is awful
is 1 huge tailwind css file at development in your app and importing the components raw
else tw will purge
there gotta be a better solution for this haha
inline css
🧠🔫
and fuck no
https://github.com/cvrlnolan/turborepo-tailwindcss this repo doesnt seem to do all the extra work either
with building the css and stuff
yh its hard wired routes to certain files
can do that yh but i doubt hmr will work
it might
wdym hard wired routes?
The tw config looks at ui package it’s hard coded it points there there’s no alias or package names
it has seperate tw configs i think
for web: https://github.com/barrybtw/with-esbuild-react-lib/blob/main/apps/web/tailwind.config.js
for ui: https://github.com/barrybtw/with-esbuild-react-lib/blob/main/packages/ui/tailwind.config.js
wait this is yours LMAO
opened the wrong tab
why is this so haaard man
was so excited about turborepo but this makes me reconsider
it doesnt
the one in the app imports the one in the ui lib
the one in the ui lib is written as if it was in the app
yeah i misread that
might try that
doesnt appear to be working
funny enough when i use the css file from ui, it does compile all the classnames used in the app
oh lol it works now
it didnt recognize the contents for packages
HMR 'works' but it also raises
Error: No link element found for chunk static/chunks/[project]_packages_ui_src_styles_globals_37af79.css
However
This error disappears when moving the css file from the ui package to the app
and HMR still works
no need for extra builders
ill check if building the app works
hmm no
after building, the tailwind from the ui is no longer bundled
wait actually it works
i thought it didnt work but that's because I commented the utils import because it didnt respect the TS path alias
I made it a relative path and now both dev (with HMR) and build are compiled
So to sum it up:
Put CSS file in app
Require PostCSS and Tailwind config from UI and export inside app
https://github.dev/niebag/turborepo-starter/tree/feat/ui u can check here if u like
I bet there's still some optimizing possible but this is a 'good' starthey,
I think the problem is that you have to compile your Tailwind styles properly in ui package - not just your main app's styles that is handled by packager.
For this:
1) Define or modify your dev script as follows:
2) Define your package exports. This allows you to import components directly, such as
@repo/ui/components/button
In the case of the styles.css you will import the compiled CSS)
3) import '@repo/ui/styles.css'
into your app package, such as in your layout.tsx file.hey thanks for the share, ill look into it