Next.js Discord

Discord Forum

How to properly set up a UI package in Turborepo

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hey lads, ive been trying to move my project to one turborepo so i dont need to open different vscode windows each time i want to work on my project, but i seem to have run into an issue with my UI package

It doesnt seem to be rendering properly. a great example is my login page. There used to be a normal checkbox rendered, and now theres just a dot

All my UI components dont have a background anymore, no hover effect, no nothing. These are basically just base shadcn components, i havent really changed anything about them, especially not my checkbox or button
theres a lot of weird stuff happening
Answered by Asiatic Lion
fixed it! i was exporting the wrong css file (i was exporting the src one, not the dist one)
View full answer

12 Replies

Asiatic LionOP
when i check the source, it seems to still be normal
let me know what files you want to see
@joulev you need to explicitly register your UI package as a source https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
Asiatic LionOP
im a bit confused. Should I use my package name (i.e @acme/ui) or the erelative path
Asiatic LionOP
i did the relative path and it still doesnt seem to work
my frontend tailwind.css file (src/styles/globals.css)

@import "tailwindcss";
@source "../packages/ui/src/tailwind.css";
and my packages/ui tailwind.css
import "./tailwind.css"

export * from "./components";
export * from './lib'


my index.ts
Asiatic LionOP
btw this is what its meant to look like
(an old build)
Asiatic LionOP
fixed it! i was exporting the wrong css file (i was exporting the src one, not the dist one)
Answer