Create custom Dynamic Components in Tailwind CSS using matchComponents Plugin Function

In Tailwind you can create your own components which are can vary slightly based on your custom key in the theme. Avatar is one such example for a dynamic component that you can create using the matchComponents plugin function in Tailwind configuration. You will see why and how to create one in this video.
Demo:
play.tailwindc...
Want to master Tailwind CSS with such awesome examples and explanations? You'd love my eBook and video course "Level up with Tailwind CSS". Check it out here - shrutibalasa.g...
Use the discount code "THIRUS10" to get a special 10% discount.
Follow me on Twitter / X - / shrutibalasa

[@MrCC-hx8xr]

More videos like this! This is advanced approach how to use Tailwind with very clear way,
(and there aren't many of those anywhere)
Thx a lot.

[@Thirus]

Thank you! Yes, there aren’t many out there. Also, all of this is changing with version 4. Lots of new content with that next.

[@amirnadji5427]

Nice! didn't know this wonderful option

[@Thirus]

Glad to know now :)

[@anj000]

It doesn't fully work for me. Instead of flat theme I would like to use nested color, for example like this:
theme: {
colors: {
primary: {
DEFAULT: '#....'
5: '#....'
10: '#....'
50: '#....'
}
secondary: {
5: '#....'
10: '#....'
}
}
}
But this approach is not taking nesting into the account and only generates `custom-primary` and `custom-secondary` instead of all possible values.

[@MrCC-hx8xr]

As I wrote once before, it's a nice demonstration, but in practice it seems to me to be skeletal and cluttered. I want to write CSS in a CSS file, not a JS file. But then Tailwind whisperer doesn't whisper in VSC.
How would this be written for the current version 4 of tailwind today? The approach has changed (all in the CSS file), but I would like VSC to whisper.
Can you make a video? :-)

[@thewandadoll7089]

how can you make tailwind intellisense aito complete your custom class?

[@Thirus]

If you add it on the configuration like I did, it will autocomplete on its own

[@SpeedCodes-oc7ed]

Hi dear Thirus, i really can't wait until you release your alpinejs course, do you have any publish date?

[@Thirus]

I still haven’t decided firmly on doing it. Might do a 30 mins crash course. But not anytime in the next 4 months :(

[@Thirus]

But I really like Traversy Media’s course on it - th-cam.com/video/r5iWCtfltso/w-d-xo.htmlsi=MvEMKVBdPqg21oxf
I’m not sure if I can do a better job than this.

[@SpeedCodes-oc7ed]

@@Thirus thanks for your stuff, yeah i can understand it, i've looking more something about go deeper into this issue... to create components stuffs, you know :)....

[@arshadahamed988]

I have doubt what is tailwindcss/plugin

[@thepromisebenard]

Nice video... Mind sharing your vscode settings? I love the look and feel of it..

[@Thirus]

I really don’t remember what settings I’ve changed. I followed part of the course by Caleb Porzio - “Make VS code awesome”

[@thepromisebenard]

@@Thirus thank you for the response

[@adilaarshad4859]

My happiness❤❤❤❤❤❤

[@Thirus]

Ha ha 😀

[@one-stop-zone]

Hi maam, Try to upload more websites development videos using tailwind. Please create realtime webpages and use page animantions etc.

[@Thirus]

There are many such videos on this channel already. Do check them out

[@one-stop-zone]

@@Thirus I have watched every thing, there are cropped or short videos, could you please make complete website tutorials with advanced topics.

[@one-stop-zone]

@@Thirus you have a great teaching skill, please do more videos