Possibility to have custom tailwind config for individual components?

[kmhari]

I'm building component library and wanted to build it framework agnostic.
so naturally wanted to try out tailwind css for that purpose.

Right now if want to add new colors or shadow classes apart from what tailwind already provides, i use to update tailwind.config.js. Each component is different from each other and how can i create multiple configuration of individual components that get applied only to that component.

[philippbosch]

The goal of the Tailwind CSS config is to make sure that all parts of the site use the same design parameters. It's like a design system in code.

From what I understand you want the exact opposite? I don't exactly understand the reasoning behind that. Shouldn't all components of the library share the same appearance? Maybe I didn't really get what you are trying to achieve.

Usually you'd have a bunch of design settings in your tailwind.config.js like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          default: '#ff0000',
          light: '#ff6666',
          dark: '#990000',
        }
      },
      shadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      },
    },
  },
};

and you'd use these throughout your component library:

<button class="bg-brand-default text-white shadow-3xl">Hit me</button>

<input type="border-brand-dark shadow-3xl">

and so on. Does that make things clearer? If not, maybe provide some more insight into what you are trying to do.

[kmhari]

the reason i'm asking for such request is that i'm working on multiple products and thus i build loosely coupled components so that i can use them in other projects as well. Kind of like tailwindui, but each could have its own design. Thus having a separate tailwind config for individual css could work well for this case.

Like i've created a testimonial in project1 and then i want to exactly ditto the ui, so i want to extract the UI just for that component and use them in other project as well. A mix of global and component level config.

[philippbosch]

I'm not aware of a reasonable approach using Tailwind CSS for what you are looking for.

[kmhari]

okay. can we generate those additional custom classes generated from tailwind.config.js into a separate css file instead of merging the base classes and additional into a single one.