Need help with Shadcn UI styling in Tailwind v4 and Tanstack start monorepo
I'm excited to share a project I've been working on called "Tanstack Forge" - it's a modern monorepo template built around Tanstack Router and React 19. I've put together what I think is a pretty nice stack with Tanstack Query, Tailwind CSS v4, Shadcn UI, and more!
I'm running into a bit of an issue with the Shadcn UI styling though. While regular Tailwind classes are working fine, the Shadcn UI component styles don't seem to be applying correctly. I'm not sure if the problem is with my globals.css setup, the tailwind configuration, or something else entirely.
Has anyone here integrated Shadcn UI with Tailwind v4 in a monorepo setup? Any common problems I should look out for?
For reference, I'm using the latest Tanstack Router, and the project is structured with the UI components in a separate package. Regular Tailwind classes work perfectly, it's just the Shadcn specific styling that's not taking effect.
This is the link to my github repo if you want to check it out: https://github.com/astronautfa/tanstack-forge
Any help or pointers would be much appreciated!
GitHub
GitHub - astronautfa/tanstack-forge: A modern, opinionated monorepo...
A modern, opinionated monorepo template for building lightning-fast, feature-rich single-page applications. - astronautfa/tanstack-forge
6 Replies
conscious-sapphire•6mo ago
man,
conscious-sapphire•6mo ago
GitHub
GitHub - TanStack/create-tsrouter-app: Create-tsrouter-app is drop-...
Create-tsrouter-app is drop-in replacement for create-react-app that builds TanStack Router based SPA applications - TanStack/create-tsrouter-app
conscious-sapphire•6mo ago
you’re basically reinventing the wheel
rare-sapphireOP•6mo ago
Thanks. I didn't know this existed. I just followed the documentation for creating a tanstack start from scratch and that was the code I ended up with. I have migrated my turborepo setup to use the create-tsrouter-app in the dashboard app. The problem however still exists. When I import the globals.css from the ui pakcage the styles are not loading. I even recreated the globals.css inside of the dashboard package and referenced it in the __root.tsx file but the shadcn styles are not taking effect.
rare-sapphireOP•6mo ago
This is the style of the button and badge that I am getting on the index.tsx which is not the correct styling for the shadcn components
rare-sapphireOP•6mo ago
I found the solution. I am writing here for reference that in your globals.css file you should include a @source '../../'; that directs to the packages/ui root. So that the custom styling takes effect. I took this from this discussion on github: https://github.com/tailwindlabs/tailwindcss/issues/16733
GitHub
4.0.8 is a break update, many styles don't work after upgrading in ...
What version of Tailwind CSS are you using? v4.0.8 What build tool (or framework if it abstracts the build tool) are you using? pnpm10.4.1 astro5.3.0 tailwindcss4.0.8 @tailwindcss/vite4.0.8 What ve...