Theo's Typesafe Cult•11mo ago

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

iDarkLightning•11mo ago

Where are you importing a stylesheet?

nielsOP•11mo 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•11mo ago

you have to export the tailwind file from the ui app

nielsOP•11mo ago

the CSS one?

barry•11mo 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

nielsOP•11mo 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•11mo ago

yeah in exports too

nielsOP•11mo 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•11mo 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

nielsOP•11mo 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•11mo 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

nielsOP•11mo ago

xd but how does that make a tree tho? as it is still referenced from an index

barry•11mo 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

nielsOP•11mo 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•11mo 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•11mo ago

https://github.com/barrybtw/with-esbuild-react-lib/tree/main/packages/ui

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•11mo ago

this is some garbage i did a while ago

nielsOP•11mo ago

so after every change in dev you need to restart your dev server?

barry•11mo ago

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

nielsOP•11mo ago

thats crazy

barry•11mo ago

no its not its a seperate package and bundling is a pain in the ass

nielsOP•11mo ago

i mean yea it makes sense but DX is awful

barry•11mo ago

is 1 huge tailwind css file at development in your app and importing the components raw else tw will purge

nielsOP•11mo ago

there gotta be a better solution for this haha

barry•11mo ago

inline css 🧠 🔫 and fuck no

nielsOP•11mo 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•11mo ago

yh its hard wired routes to certain files can do that yh but i doubt hmr will work it might

nielsOP•11mo ago

wdym hard wired routes?

barry•11mo ago

The tw config looks at ui package it’s hard coded it points there there’s no alias or package names

nielsOP•11mo 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•11mo 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

nielsOP•11mo 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

nielsOP•11mo 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•11mo 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.

nielsOP•11mo ago

hey thanks for the share, ill look into it

Gaming

Programming

Monorepo UI package has no styling when imported