How can we extend existing utilities?

[dungsil]

Hello
I want to extend the existing text-* utility to include colors.

@theme {
  --text-md: 1rem;
  --text-md--line-height: 1.5;
  --text-md--color: var(--color-primary);  /* custom */
}

/* compiled */

.text-md {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
   color: var(--text-md--color);
}

I tried it as shown below, but it doesn't seem to work.

@utility text-* {
  color: --modifier(--color-*, [color], [*]);
}

Is there another way?

[mehediScriptDev]

@layer components {
.my-text-md {
@apply text-md text-primary;
}
}

u can use it like this...this ll work..ive tested it....

[dungsil]

Hello @mehediScriptDev ,
Thanks for the answer. But if I write it like this, don't I have to add it for every typography variable?

[mehediScriptDev]

Yes u have to

[wongjn]

You'd need to use --value() along with --text-*--color. This would correspond to the theme token value: https://play.tailwindcss.com/E994wcIuDs?file=css

[dungsil]

Hello @wongjn
It seems to be working perfectly, thank you!