Sharing your Tailwind Configuration between Monorepo Packages

#javascript #tailwindcss #typescript #react

In this post, you will learn how to share your Tailwind configuration between multiple packages inside a monorepo. It's important to note that the example provided here uses NPM workspaces, and while it may not be directly applicable to other solutions like Yarn, PNPM workspaces, Lerna, or Nx, the principles discussed can still be helpful.

Example Tailwind Monorepo Setup

Let's begin by examining the example project setup we'll be using for this explanation:

- packages
  - ui
  - web
- package.json

As you can see, we have two packages. The ui package represents the UI component package from which we export all our React components. It will also serve as the location for our Tailwind configuration, which we want to import into our web package. Keep in mind that this approach can also be extended to other workspace packages within your monorepo.

Setting up Tailwind

Before we dive into the specifics of sharing the Tailwind configuration, let's make sure we have the necessary setup in place. In this example, we'll be using Vite to generate our React application. You can follow the Tailwind setup as described in their documentation to get started. Once you've run all the necessary commands, your web directory should contain the following files:

- postcss.config.js
- tailwind.config.js

Moving the Theming Information

With our initial setup complete, we can now proceed to move the theming configuration out of the web package.

To achieve this, start by copying the theme block from your Tailwind configuration file located at packages/web/tailwind.config.js. Create a new file at packages/ui/tailwind.config.js, and paste the copied theme block into it.

It's important to name the config file tailwind.config.js so that developer tools can parse your theme from the UI package as well.

Your files should now look like this:

packages/web/tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [],
}

packages/ui/tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
  theme: {
    // ... your theme configuration
  }
}

As you can see, inside our UI package, we only include the theming information. This approach is beneficial because we don't want to configure plugins globally since the UI project lacks a build process and won't process the plugins.

While it might be tempting to include this configuration directly in your web project, it's recommended to keep the plugins in separate projects.

Now, let's include our theme from ui in our web configuration. Add the following line to packages/web/tailwind.config.js:

import config from '../ui/tailwind.config'

Additionally, you need to allow Tailwind to watch your UI components and the Tailwind configuration file. This ensures that your build process can update your external theme configuration.

To do this, add the following lines to the content array in packages/web/tailwind.config.js:

{
  "content": [
    // paste it below your normal content configuration
    '../ui/**/*.{js,jsx,ts,tsx}',
    '../ui/tailwind.config.js',
  ],
}

Voila! Your project should now pick up the external Tailwind configuration correctly, enabling you to share your theme across multiple projects.

Conclusion

Thank you for reading this post. I hope you found it helpful! If you enjoyed this content and would like to read more, feel free to follow me on Twitter and Github.

If you're in need of a solid editor library for your next project, be sure to check out Tiptap. It's an open-source project, and we always appreciate feedback and contributions!