Configure Tailwind in a Nx Monorepo With Potentially Multiple Apps and Libs
Monorepos might consist of multiple applications and libraries. As such, when we setup Tailwind, we might want to have certain workspace-wide global Tailwind settings which all of our applications should use (e.g. imagine company level branding colors etc). At the same time though, individual applications might have different requirements and thus need to adjust and overwrite the global Tailwind configuration. In this lesson, we learn how to have a global Nx monorepo workspace wide configuration that is imported into the application level individual Tailwind configurations
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Apart from the default configuration, Tailwind comes also with a set of plugins. They can be either created by the Tailwind team directly, or by the community. You can just install MS normal npm packages, and then you reference them in your Tailwind config under that plugins section.
[0:17] One plugin from the Tailwind team that might be interesting for us, is the Typography. What that allows you to do is, for instance, at a top-level node, just add a couple classes, and then this package would make sure that all the H1s and P tags within that article, for instance, are styled properly.
[0:34] Let's have a look how we would configure that in our Nx workspace with Next.js. Let me copy this name here. Let's go over to our workspace, and first of all, add that package. Once we have added that, the next step would be to go into the Tailwind config, and add it under our plugins section here and install it. Basically, we would do require, and paste in here this Typography plugin.
[0:59] This works perfectly. Again, since we are in a monorepo scenario, we might want to look a bit ahead of it, and think about what might happen if further applications join our workspace. Right now, we have just this Site Project as an application, but there might be multiple ones.
[1:14] In a more enterprises setting, where you might have different teams joining that workspace and also wanting to use Tailwind, you might come to a situation where you might have a specific Tailwind configuration for an application, like different colors or also different plugins installed.
[1:30] Then again, you might have, at the more corporate level, design guidelines at a more higher level, so at a workspace level. What this means is that we might want to have a more global-level file. Let's call this 'Tailwind Workspace Preset.' You can really name this as you want, and have a more global configuration here.
[1:49] For instance, let's assume that we want to use the typography at a global level. Rather than actually having it in here, we would remove it from here, go to our workspace setup, and paste it in here. Obviously, we also need to extend now our Tailwind config from here. What we could do is just use the according preset property on the Tailwind config, and require our file.
[2:16] We would go up to the workspace root and choose the 'Tailwind Workspace Preset' and just import that. In that way, we connect a global-level Tailwind preset that works for our entire organization, and import it into our local Tailwind config for that specific site project which we're having. Here, we can then further customize things that make sense just for our application, specifically.