Configure Tailwind for your Storybook Setup in an Nx Workspace
We want to have a library where to host our UI components s.t. they can be easily shared within our Nx workspace. In many cases a Nx workspace starts like this, and then over time we add new applications, either because new projects start or even because we split up existing projects into multiple ones for a better scalability. Furthermore, having a shared UI library is a common scenario especially in larger real-world applications to encapsulate the corporate design components
In this lesson, we look into how to configure our Nx React Storybook setup to work with Tailwind CSS.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Now that we have our Storybook running, we want to make sure that it also works nicely with Tailwind, because that's what we ultimately use in our application. To configure Tailwind for our Storybook library, we need to simply go in here and set up Tailwind, just as we did for the application itself.
[0:17] Since this is in a subdirectory, we would CD into the libs/shared-ui folder, and then execute, npx tailwindcss init -p. Now this creates our PostCSS config and Tailwind config, just as we did previously in our application. We can actually go there and copy the configuration. For the PostCSS config, let me just copy this entirely, go to the PostCSS config of our library, and replace the content.
[0:47] Since we already used here the join and dirname, this will still work, because this now will pick up this directory name and find the Tailwind config. We can close the actual PostCSS config. Now, we also need to copy the Tailwind config. I'm going here, again, to my Next.js site project. Then, let's go to our library Tailwind config and also paste in the configuration.
[1:13] We definitely want to make a couple of adjustments here. This is definitely not called pages, but rather, we would just want to process here, the source directory. We can use source, and leave the remaining part the same. The createGlobPatterns would still work. It will now use this library, based on the current directory name, and make sure to purge all the dependencies of this library.
[1:36] We can leave the rest as is. The only thing we also need to adjust here is the path to our main Tailwind workspace preset. Here, one level up, is missing. We don't need to do any further configuration. Also, our main.js can remain as is.
[1:50] We don't need to pull in any specific Storybook, Tailwind, or PostCSS add-on, because most of the stuff is already handled by this preset, which has been configured when we set up Storybook for this library. This will make sure that the PostCSS config is being detected properly and resolved, just as for our application.
[2:09] What we need to do, however, is to load in the basic Tailwind imports. As we have seen here in our application on the main style sheet, we import here the Tailwind base components and utilities. There's some slight duplication here, in that we also want to report that down here.
[2:26] Since these might be more global imports, we could also have a more global-level CSS, which we import both into our application, as well as here in our Storybook. For now, we can just create here Tailwind imports.css, based in here to imports, and then we can go to our preview in CSS and import this new style sheet. This will make sure that once we bootstrapped Storybook, it will pick up the CSS and properly load in all the main basic Tailwind utilities.
[2:56] Now, that we have configured our library, let's launched Storybook again and see whether we got Tailwind set up properly. If we now go over to 4400, you can already see that this font slightly changed. This means Tailwind has been loaded in.
[3:14] Let's maybe go to the actual Story here and modify it slightly by applying a couple of Tailwind classes. Instead of directly returning here to component and return here a div, which wraps our component.
[3:27] On that div, let's add a couple of Tailwind classes to add some background gray. If you go back to our story here and refresh, we should see all the changes being applied properly.
[3:37] Now, one thing to pay attention to is that if you're in your conflict of Tailwind of the Storybook setup, you use the jet mode, make sure to run the stories and watch mode as well.
[3:48] Basically, we should prefix our command with a Tailwind mode=watch and then invoke an X Storybook shared-ui, to make sure that all the Tailwind changes that you make are reflected automatically.
[4:01] Now, note that as of the time of the recording, the jet mode is still an experimental feature, but it might be the the default one in any upcoming Tailwind release.
[4:09] Now, if you refresh, you will see the Tailwind changes are being applied, but also, if we go into our story and say your background equals=300, it rebuilds. If we go here, we see the live changes are being applied.