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
No description
No description
No description
36 Replies
iDarkLightning
iDarkLightning•10mo ago
Where are you importing a stylesheet?
niels
niels•10mo ago
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
barry
barry•10mo ago
you have to export the tailwind file from the ui app
niels
niels•10mo ago
the CSS one?
barry
barry•10mo ago
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 file
niels
niels•10mo ago
and what about the components? should they be in exports aswell cause i cant seem to make it work with "main" or "types"
barry
barry•10mo ago
yeah in exports too
niels
niels•10mo ago
"main": "./index.tsx",
"types": "./index.tsx",
"main": "./index.tsx",
"types": "./index.tsx",
export * from "./src/components/atoms/button";
export * from "./src/components/atoms/button";
barry
barry•10mo ago
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
niels
niels•10mo ago
so more like this; packages/ui/src/components/atoms/index.tsx
export * from "./components/atoms/";
export * from "./components/atoms/";
packages/ui/src/index.tsx
export * from "./components/atoms/";
export * from "./components/atoms/";
barry
barry•10mo ago
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
niels
niels•10mo ago
xd but how does that make a tree tho? as it is still referenced from an index
barry
barry•10mo ago
yes index is root
// ui/src/index.tsx
export * from "./components"
// ui/src/index.tsx
export * from "./components"
// ui/src/components/index.tsx
export * from "./Button.tsx"
export * from ...
...etc
// ui/src/components/index.tsx
export * from "./Button.tsx"
export * from ...
...etc
niels
niels•10mo ago
export * from "./components/atoms/";
export * from "./components/molecules/";
export * from "./components/atoms/";
export * from "./components/molecules/";
this will not result into import { Button } from '@repo/ui/atoms' right not sure what a better practice is anyway
barry
barry•10mo ago
if exports "." is set to this file then repo/ui would be it afaik i meant files not exports oh wait no nvm
barry
barry•10mo ago
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.
barry
barry•10mo ago
this is some garbage i did a while ago
niels
niels•10mo ago
so after every change in dev you need to restart your dev server?
barry
barry•10mo ago
yes 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
niels
niels•10mo ago
thats crazy
barry
barry•10mo ago
no its not its a seperate package and bundling is a pain in the ass
niels
niels•10mo ago
i mean yea it makes sense but DX is awful
barry
barry•10mo ago
yes is 1 huge tailwind css file at development in your app and importing the components raw else tw will purge
niels
niels•10mo ago
there gotta be a better solution for this haha
barry
barry•10mo ago
inline css 🧠 🔫 and fuck no
niels
niels•10mo ago
https://github.com/cvrlnolan/turborepo-tailwindcss this repo doesnt seem to do all the extra work either with building the css and stuff
barry
barry•10mo ago
yh its hard wired routes to certain files can do that yh but i doubt hmr will work it might
niels
niels•10mo ago
wdym hard wired routes?
barry
barry•10mo ago
The tw config looks at ui package it’s hard coded it points there there’s no alias or package names
niels
niels•10mo ago
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
barry
barry•10mo ago
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
niels
niels•10mo ago
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
niels
niels•10mo ago
No description
niels
niels•10mo ago
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' start
huszarandris
huszarandris•10mo ago
hey, 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)
{
"name": "@repo/ui",
"scripts": {
...
"dev": "tailwindcss -i ./src/styles/styles.css -o ./dist/styles/styles.css --watch",
},
"exports": {
"./components/ui/*": "./src/components/ui/*.tsx",
"./components/*": "./src/components/*.tsx",
"./lib/*": "./src/lib/*.ts",
"./styles.css": "./dist/styles/styles.css"
}
}
{
"name": "@repo/ui",
"scripts": {
...
"dev": "tailwindcss -i ./src/styles/styles.css -o ./dist/styles/styles.css --watch",
},
"exports": {
"./components/ui/*": "./src/components/ui/*.tsx",
"./components/*": "./src/components/*.tsx",
"./lib/*": "./src/lib/*.ts",
"./styles.css": "./dist/styles/styles.css"
}
}
3) import '@repo/ui/styles.css' into your app package, such as in your layout.tsx file.
niels
niels•10mo ago
hey thanks for the share, ill look into it
Want results from more Discord servers?
Add your server