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!