No video :(

My Favorite Tailwind Tools

Подписаться 47 тыс.

Просмотров 23 тыс.

50% 1

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...

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@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 11 месяцев назад

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!

@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 7 месяцев назад

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 7 месяцев назад

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

@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.

@mohammadmahdialvansaz8001 Год назад

Great A Shadcn video would be nice

@CodinginPublic Год назад

I’ll cue something up!

@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!

@ionutsandu5913 8 дней назад

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

@skylerjknight 11 месяцев назад

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

@CodinginPublic 11 месяцев назад

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 11 месяцев назад

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

@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.

@K.Huynh. 9 месяцев назад

thank for sharing

@CodinginPublic 9 месяцев назад

Glad it was a help!

@DanteMishima Год назад

I found your repo before your video 😂😂

@CodinginPublic Год назад

lol 👀

@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.

@TheDeprecatedLibrarian Год назад

New sub. This content is really great!

@CodinginPublic Год назад

Welcome! So glad you enjoyed the video!

@lpndev 11 месяцев назад

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

@CodinginPublic 11 месяцев назад

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

@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 👊

@anhdunghisinh 7 месяцев назад

Hey, how do you make className wrapline like that?

@CodinginPublic 7 месяцев назад

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

@shayantriedcoding Год назад

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

@CodinginPublic Год назад

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

@mabillama Год назад

Another great video!!

@CodinginPublic Год назад

Glad you enjoyed it!

@kashboyflexn2440 Год назад

I wish you let the video be saved to playlist please

@CodinginPublic Год назад

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

@sjoerdvermeijden 2 месяца назад

Let's timestamp this :D

@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

@serychristianrenaud Год назад

Thank

@CodinginPublic Год назад

…you

@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

@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 11 месяцев назад

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

@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