Consuming a Component Library that uses TailwindCSS

Question

We have a Component library (VueJS) that uses TailwindCSS which we are going to publish as a private npm package. The questions I have are

1. How do we also expose the tailwind.config.js in the Component Library so the consuming project can make use of the settings in the Component Library for example the colors in the consuming project's tailwind.config.js.
2. Is there a recommended way of "inheriting" the styles defined in the Component library?
3. And also since TailwindCSS V3 uses JIT to generate the classes, how do I also include the classes in the Component library?

Answer 1

For 1 and 2 it looks like your component library could export a Tailwind plugin that a consuming project would register in their own Tailwind config.

The second argument to plugin() can be any configuration your component libary wants to merge with the user's Tailconfig config.

E.g.

// plugin.js
const plugin = require('tailwindcss/plugin')

const myComponentLibraryConfig = {
  theme: {
    extend: {
      colors: {
        salmon: 'salmon'
      }
    }
  }
}

module.exports = plugin(({ addUtilities, addComponents, e, config }) => {
  // Add your custom styles here
}, myComponentLibraryConfig),

When publishing your component library as a package, ensure the plugin is included.

Then, in your consuming project:

// tailwind.config.js

module.exports = {
    //...
    plugins: [
        require('my-component-library/plugin')
    ]

}

For 3, it looks like you might need to explicitly add the location of your component library's components to the content section. E.g.

// tailwind.config.js

module.exports = {
    content: [
        "./node_modules/my-component-library/**/*.js",
        "./src/components/**/*.{js,jsx,ts,tsx}", // or whatever
    ]
}

The actual paths to things will depend on your project strucutures, but hopefully you get the idea.