Anyone here good with tailwind and package bundling? I need some assistance 🙏
I have a bit of a complex issue, basically i have set up a workspace using npm workspaces. And im using this in a bit of a strange way. Basically i have broken up a monolith of a frontend up in to a workspace, where what would previously have been 2 apps is now 1 app with 2 application packages, 1 auth package and 1 design library. The issue is that this is bundled. So i have a routes defined in the packages, where i intended to use this for loading the component structure as if it was an app. There were a fair bit of gains with this, basically having 2 apps, building in to one workspace, separate package files and a very minimized rollup and use only build. But the issue is tailwind like it often is. The case is because i use the routes, the vite app does not recognize the components as part of the application for some reason. I can use all of the features and they work fine. But im not getting any CSS. This is due to the well known roadblock of tree-shaking in tailwind, where it only imports what is actually part of the runtime in to the css. In which what is part of the package is not. Well not used directly per say. Please tell me if u know a workaround for something like this.
1 Reply
Okay i figured out a solution if anyone ever wonders about this, in your index.css u can define a "@source" variable where u define the path for your package. This solves the issue of tree-shaking in tailwind. So if u ever get the idea to set up a monorepo using npm workspaces, this is probably the easiest workaround for tailwind configuration for internal packages.
If anyone have a better solution, keep me posted 🔔