3 Must-Have VS Code Extensions for Tailwind CSS

[@Creed-Odyssey]

Just fell in love with tailwind after years of vanilla css

[@davidallred991]

For me, the most important tailwind plugin after intelliSense is Headwind, which auto sorts your tailwind properties on save. Like prettier is for code, Headwind is for tailwind. I often have some very large classNames especially on a production project that will have responsive styling for screen sizes. After a while and without trying, your brain will accustom to the sorting and you will be able to read and edit tailwind styles much faster. Without even realizing it, I started to notice i could have very long classNames and when I wanted to edit something I would just go right to where the property was without having to read the whole classname. The other added benefit is that I don't think about where to add new properties anymore within a classname. I just always add it to the end and then it will be sorted on save. While you can customize the sorting orders I have not messed with it at all and still use the default sorting order. TBH, I haven't looked into much detail on how it sorts or what it prioritizes by default. Like I said, with time it just became natural where to look for things without any thought or effort into it.

[@unknownguywholovespizza]

I recommend using prettier tailwind plugin because an extension might not be available in other environments

[@tobitacklestech]

Yes I use that as well!

[@abishekbaiju1705]

thanks for suggesting this plugin man.

[@JustInCarryYT]

another tip i got for the Community 🐥 When using selectors with 1px for Example "h-[1px]" or "border-[1px]". In most cases, there are shorter ways to write this. For these Examples: "h-px" and just "border". ✌️

[@tobitacklestech]

Awesome

[@abishekbaiju1705]

nice to know

[@lukas.webdev]

Great video, Tobi! Since I’ve already worked quite a lot with Tailwind and even created a few videos about it on my channel, I’m pretty familiar with most of its tricks and plugins. However, I had no idea about Extension #1 - that’s awesome! Thanks for sharing! 😉

[@tobitacklestech]

🫶🏼

[@Hhong_1120]

Excellent Extensions , I take the first 2. Tailwind doc is excellent, helps me to open doc just in vs code, and the tips for enabling string are just some magic things

[@tobitacklestech]

Thanks bro 😎

[@Niamudeen]

Bro you just forced me to subscribe to your channel. 🤩

[@JustInCarryYT]

Oh great, thats just what i needed ⚡

[@dxp_wealth]

Thank you very much for the, great suggestions. Here are the list of extensions i use🙌 : Auto Rename Tag Bookmarks Code snap Es7+ React snippets Fast Arrow Headwind Hungry Delete Intellicode Prettier Tailwind Docs Tailwind Fold Tailwind Intelisense

[@tobitacklestech]

Thanks for sharing!

[@kritsana6170]

Thank you for sharing.

[@holgerflick]

Great video! On recommendation 3 the top of the screen is not shown because your recording still is focused on the bottom of the screen. Also, I love that I finally found somebody who pronounces ‚array‘ the same way I did growing up in Germany ;-)

[@tobitacklestech]

@@holgerflick im german as well bro 😁🫶🏼, thanks for the tip!

[@holgerflick]

@@tobitacklestech Yes, I know. I think you also mentioned Berlin at some point iirc. I was born in the Ruhrgebiet...thus the BVB jersey in my avatar ...

[@mdeutschmann]

Best first chapter title ever 🤣

[@XCanG]

I was actually needed this, but for a different reason. I finished my projects and was reassigned to another one, where other developer already worked on it. By myself I don't work with Tailwind at all, but on that project only Tailwind is used, so I has to adapt. But I know nothing about it naming system, so it look almost alien for me (of course some stuff cross with CSS with exact names, but still writing it on my own without suggestions is hard).

[@tobitacklestech]

Hope I could help!

[@refeals]

Pretty awesome recommendations

[@abubakarsadeeq2974]

You don't even use any of this Ai copilot, You are a real developer. 😂

[@HikaruAkitsuki]

Yea. I have problem on the intelligence either. If you go back to the tag to fix a className, I always have to start to type space first..

[@nesmaaboki7213]

Thank you it helps a lot

[@nishanttrivedi8711]

Amazing video, earned a subscriber!

[@tobitacklestech]

Awesome, thank you!

[@just_1_Benny]

another W Video 🙏🙏

[@tobitacklestech]

More to come!

[@rochardeliamareloi7577]

Thank you

[@akoladebode-ajayi327]

Thanks sir

[@dugtrioramen]

I want tailwind prettier that auto splits long lines. I tried one but it's a but iffy

[@tobitacklestech]

What do you mean exactly?

[@akoladebode-ajayi327]

First to comment 😅

[@JustInCarryYT]

Ahh you beat me 😅

[@lukas.webdev]

congrats! 😄

[@code1860]

My keyboard doesn't have command.

[@tobitacklestech]

@@code1860 then do strg instead

[@chess4964]

6:20 not clear too zoomed in.

[@tobitacklestech]

Yes I’m sry!

[@abubakarsadeeq2974]

You don't even use any Ai copilot 😂.wow!

[@unknownguywholovespizza]

What's so special about it? I don't use it either. You don't have to have it

[@abubakarsadeeq2974]

@@unknownguywholovespizza getting rid of the it also. Wanna be a real developer

[@abubakarsadeeq2974]

You don't even use any of this Ai copilot, You are a real developer. 😂

[@lukas.webdev]

😆👍