Is there a way to be able to use a set of the color options to generate custom compoents with all the color options?

[anthonylex]

I would like to do something where I generate a custom component styles for all the colors. Is there a way to do this programatically so if new colors are added they are also generated and so I dont have to have a bunch of duplication?

.my-component-primary {
    @apply border-l-primary
}
.my-component-secondry {
    @apply border-l-secondary
}
// and so on for all colors

[saadeghi]

Yes. example:
https://play.tailwindcss.com/LhTGgRs2qp?file=css

@utility my-component-* {
  @apply border-l-4 m-4 p-4;
  border-left-color: --value(--color-*);
}

Docs: https://tailwindcss.com/docs/adding-custom-styles#functional-utilities