Best Practice for reusable partials / components?

[MrMacStripe]

Hey everyone,
I've built something similar to TailwindUi for my business to quickly spin up websites for clients. I'm always tinkering with the theming and putting in a lot of work to basically change colors.
What do you think would be best practice with Tailwind to make this more dynamic? Abstract the color names to something like primary / secondary and only use those, which would in turn limit again to a two colored-brand? Another idea I had was to declare descriptive color names like pageBg, containerBg, elementBG and so, but that is also limited as soon as you have a colorful brand.
Maybe I'm overcomplicating things and it's expected to do the color adjustments by hand?
Thanks for your input 👍

[vincentcordel]

having a color palette is useful for consistency (and not overuse different colors).
once you have it, you can extend your theme with variables.

ex.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'family-1': ['Georgia, Cambria, "Times New Roman", Times, serif'],
        'family-2': ['"IBM Plex Sans", system-ui, -apple-system, BlinkSystemFont, "Segoe UI", Roboto, "Helvetica neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"']
      },
      colors: {
        'primary': colors.amber,
      }     
    },

and you can use it like other colors

<div class='primary-500'>

you can also create a plugin for each component in your config file.

const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin')

module.exports = {
  [...]
  plugins: [
    require('@tailwindcss/forms'),
    plugin(function({ addBase, config }) {
      addBase({
        '.large-title': { 
          fontSize: config('theme.fontSize.xs'),
          lineHeight: config('theme.lineHeight.none'),
          color: config('theme.colors.primary.900'),
          textTransform: 'uppercase',
        },
      })
    })
  ],
}

then use the new class in your app

<div class='large-title'>
// = <div class="text-primary-900 uppercase text-xs leading-none>