Doesn't work tailwind css on monorepo
Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
Hello all, I have a question.
I will use common components on my multiple next.js projects.
As you can see on title, I also use monorepo directory structure.
In first and second screenshots, I imported "SurveyAdminPage" component on outside of next.js project(packages/shared/ui as you can see on import statement), but I have a component(tenant-frontend/components/...tsx, which is same with component which is in outside of project, but it works.
and after I removed this component(tenant-frontend/components/...tsx) and npm run dev again, it doesn't work like third screenshot, and the structure is like fourth screenshot at that time.
So, I think tailwind css doesn't work if I use component which is located on outside of my next.js project.
Any advice please?? it is so frustrated
I will use common components on my multiple next.js projects.
As you can see on title, I also use monorepo directory structure.
In first and second screenshots, I imported "SurveyAdminPage" component on outside of next.js project(packages/shared/ui as you can see on import statement), but I have a component(tenant-frontend/components/...tsx, which is same with component which is in outside of project, but it works.
and after I removed this component(tenant-frontend/components/...tsx) and npm run dev again, it doesn't work like third screenshot, and the structure is like fourth screenshot at that time.
So, I think tailwind css doesn't work if I use component which is located on outside of my next.js project.
Any advice please?? it is so frustrated
2 Replies
African Slender-snouted CrocodileOP
Yes.
@African Slender-snouted Crocodile Hello all, I have a question.
I will use common components on my multiple next.js projects.
As you can see on title, I also use monorepo directory structure.
In first and second screenshots, I imported "SurveyAdminPage" component on outside of next.js project(packages/shared/ui as you can see on import statement), but I have a component(tenant-frontend/components/...tsx, which is same with component which is in outside of project, but it works.
and after I removed this component(tenant-frontend/components/...tsx) and npm run dev again, it doesn't work like third screenshot, and the structure is like fourth screenshot at that time.
So, I think tailwind css doesn't work if I use component which is located on outside of my next.js project.
Any advice please?? it is so frustrated
you need to explicitly register the source file for your components as they are not covered automatically by tailwind
https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources