My Favorite Tailwind Tools

Tailwind CSS is beloved by many, but a few tools make it a much better experience!
🔗 Key Links 🔗
Github: github.com/cod...
Sorting: tailwindcss.co...
TWMerge: www.npmjs.com/...
---------------------------------------
🔗 Additional Links 🔗
www.npmjs.com/...
ui.shadcn.com/
---------------------------------------
🎨 VSCode Theming
Font: Cascadia Code: github.com/mic...
Theme: marketplace.vi...
Icons: marketplace.vi...
---------------------------------------
🌐 Connect With Me 🌐
Website: codinginpublic...
Blog: chrispenningto...
Twitter: / cpenned
Patreon: / coding_in_public
Buy Me a Coffee: www.buymeacoff...

[@codewithantonio]

Very useful! I often try to follow a convention when it comes to order of my tailwind classes but had no idea there is a general practice to follow and that prettier can help with that!

[@CodinginPublic]

So glad you enjoyed it! Love your content, btw!

[@simonswiss]

Amazing video. I knew exactly what the tools would be, but still watched it and really enjoyed the way you presented the problem space and how those tools solve those problems. Good work!

[@CodinginPublic]

Cheers, Simon. That's so kind! Glad you enjoyed it!

[@ammaraateeb1914]

Love your work. Please do the shadcn clsx in depth. Also it would absolutely be a live changer if you could show how to set up animations and transitions with tw, custom configs/utility classes and apply can be tricky and very unclear

[@CodinginPublic]

I'll plan something on shadcn/ui or clsx here in the future!

[@neontuts5637]

Thanks for sharing these excellent tailwind tools Chris. Yes, please make a in-depth video on Shadcn. If possible show how to use these tools with Shadcn.

[@CodinginPublic]

Great! I’ll get something scheduled!

[@Omar45]

Amazing as usual ❤ A shadcn in-depth video would be great!

[@CodinginPublic]

🙌 I’ll cue it up!

[@IsmailMamaniat]

Thanks very clearly explained. I would like a video on using twmerge and clsx together, and possibly what a good reusable component such as a button would look like :)

[@CodinginPublic]

Sounds good! I’ll get something together! That’s essentially what shadCN does, so it’s a good thing to look at for a quick explanation in the meantime.

[@keshavakumar9828]

It's was a greate refresher, reminding me why I use these utlties 😂. Great vid

[@CodinginPublic]

lol you’re one step ahead!

[@KarimShalapy]

Very interested in how to make the cn function and the library you mentioned, definitely give it a shot.

[@CodinginPublic]

Thanks for the feedback!

[@skylerjknight]

Ah it would be so cool if we could override Astros class:list directive to include twMerge... Thanks for the video!

[@CodinginPublic]

You can use it directly in there! At least I’ve done it and I’m pretty sure it works. That’s going off memory, but pretty sure I have.

[@skylerjknight]

@@CodinginPublicYes, fairly certain it works in class:list, but I wouldn't want to ruin that clean syntax 😆

[@mohammadmahdialvansaz8001]

Great A Shadcn video would be nice

[@CodinginPublic]

I’ll cue something up!

[@mabillama]

Another great video!!

[@CodinginPublic]

Glad you enjoyed it!

[@TheDeprecatedLibrarian]

New sub. This content is really great!

[@CodinginPublic]

Welcome! So glad you enjoyed the video!

[@ionutsandu5913]

The conditional thing don't work. It generates the classes but styles are not being applied.

[@FireGames25]

Headwind sorts the classes and works with prettier out of the box :)

[@CodinginPublic]

Cool! Haven’t heard of it! I’ll check it out. Thanks!

[@treyjapan]

@@user-pg6lg2bt3y Hey, he's actually not kidding! Headwind (the name is hilarious) is an opinionated class sorter for Tailwind CSS created by Ryan Heybourn and available in VS Code

[@garytraffanstedt]

Thank you for sharing this. I could not for the life of me get it to work with the prettier plugin but Headwind worked as soon as I installed it.

[@jmula1963]

Seems that tool hasnt been updated in 3 years tho. theres also eslint-plugin-tailwindcss

[@K.Huynh.]

thank for sharing

[@CodinginPublic]

Glad it was a help!

[@lpndev]

Nice video, but could you teach us how to install the tailwind plugin for auto sort classes using Astro? Would be wonderful.

[@CodinginPublic]

It should work the same way I mentioned in this video? At least it's working for me?

[@81NARY]

Cool vid, I learned about these from using shadcn/ui. Do you have a resource where you find background images like checks.png or did you create it yourself? Looks dope.

[@CodinginPublic]

Just made it myself :)

[@81NARY]

@@CodinginPublic Awesome! Looks clean as a background. You should do a short or a quick vid on creating these patterns.

[@DanteMishima]

I found your repo before your video 😂😂

[@CodinginPublic]

lol 👀

[@0xZurvan]

Vue solve the merging conflict without the use of any external tool for you and also the conditional classes, I only see this problem when I use React, but is good to know about shadcn

[@CodinginPublic]

Oh, that’s really interesting! Didn’t know that about Vue! I wonder what they’re using behind the scenes!

[@wertin200]

4:33 A I see a fellow man of culture, using rainbow indent.

[@CodinginPublic]

lol 👊

[@phucnguyen0110]

Wait, is that a Dodge Viper polo shirt there my man? :D

[@CodinginPublic]

lol I coach a soccer team and just happened to have my coach shirt on

[@kashboyflexn2440]

I wish you let the video be saved to playlist please

[@CodinginPublic]

hmm; I think I am? Can you check again?

[@anhdunghisinh]

Hey, how do you make className wrapline like that?

[@CodinginPublic]

I think it's line-wrap feature enabled in VSCode?

[@shayanCodingMaster]

How can I use that clx and twMerge functionality in Laravel PHP and blade

[@CodinginPublic]

Hmm, that I’m not sure. Anyone else?

[@simonswiss]

Poor shad will forever be doomed with folks saying "Shad CDN" 😅I have also said this for weeks, until I realised the "d" from Shad was not in the middle of CN, even if all our brains collectively want to believe so 🤣

[@CodinginPublic]

lol seriously; I have a video planned, but just KNOW it's going to come out Shad CDN like half the time ha

[@serychristianrenaud]

Thank

[@CodinginPublic]

…you

[@sjoerdvermeijden]

Let's timestamp this :D

[@Kermin00]

I've tried to implement this auto-sorting-classes in Astro, but it doesn't seem to be supported yet.

[@CodinginPublic]

Hmm. I haven’t had trouble with Astro. Astros extension actually uses a prettier plugin behind the scenes I think. Did you use the .prettierrc file?

[@Omar45]

I was having the same problem, after some trial and error I figured out that the order of plugins matter. In the .prettierrc file when I write { "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"] } it works, but when I swap their order it doesn't work. Also if I only write "prettier-plugin-tailwindcss" as in the video it doesn't work so I have to explicitly write the two plugins (and install them as dev-dependencies ofc)

[@Kermin00]

@@Omar45 That's because "prettier-plugin-tailwindcss" has to be loaded at the end, i've read about that a few hours ago. Also, i think that i didn't try writing both plugins at once, so i'll try it later. BTW, I was on node 16.13, but some errors appeared, so i updated it to 16.14, errors disappeared, but still doesn't work.

[@Kermin00]

@@CodinginPublic I would be grateful if you could specify your node version, and if you've configured astro the same way as on the video.

[@tijohnnguyen7058]

AFAIK there is a compatible problem of Astro's prettier plugin with Prettier 3. Try to downgrade Prettier v3 to v2.8 if you use v3

[@TheCrowdel]

Hi chris make more video

[@muhammadmusab6334]

shadcdn 😂

[@CodinginPublic]

lol oops. I mean, could be a thing? 😆

[@mrFighter924]

I don't understand the popularity of tailwind, it's so robust and clunky when looking at the code

[@CodinginPublic]

My personal preference is to write my own CSS, sometimes with SCSS mixed in. But for projects I touch infrequently or write with others, I’ve found it useful for being able to quickly add new components or styling without having to study the code base to ensure my CSS will work with the rest of the project. There are other reasons it’s helpful, but that’s when I mostly reach for it. It’s a lot to look at, but those benefits have pushed me through the visuals of looking at it :)

[@mrFighter924]

@@CodinginPublic Thank you for the response

[@StephenRayner]

Quite basic. 12 minute video for all tailwind prettier plug-in and use tailwind merge.

[@CodinginPublic]

Hope you still found it helpful!

[@ihateorangecat]

for conditional styling I just use built-in style prop.

[@CodinginPublic]

That’s definitely an option. It will always override your other CSS, but it’s often the simplest and I sometimes do that, too.