Theo's Typesafe Cult•8mo 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•8mo ago

Where are you importing a stylesheet?

niels•8mo 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•8mo ago

you have to export the tailwind file from the ui app

niels•8mo ago

the CSS one?

barry•8mo 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•8mo 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•8mo ago

yeah in exports too

niels•8mo 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•8mo 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•8mo 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•8mo 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•8mo ago

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

barry•8mo 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•8mo 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•8mo ago

if exports "." is set to this file then repo/ui would be it afaik i meant files not exports oh wait no nvm

Gaming

Programming

Monorepo UI package has no styling when imported