Write Better TailwindCSS in VS Code

Let's admit it. CSS is better than the old nested tables we used to use and the one by one transparent gifts that we used to put everywhere, but it's still kind of tricky. Some people are having a hard time with it. And a lot of times you get stuck in that endless cycle of make a change, refresh, make a change, refresh. Tailwind hopes to help with that, but even learning that can be tricky sometimes.

And today's extension hopes to help. Let's get to it. Hello world. My name is Michael Jolley and I'm the bald bearded builder. Real quick, let me remind you that we stream on Twitch three days a week, Tuesday, Wednesday, and Thursday at two Eastern six GMT, I think is what that is.

It's twitch. Tvballagradedbuilder. Please come hang out with us. We'd love to see you. Let's get to our extension.

Today, we're talking about Tailwind CSS IntelliSense. Now you're thinking, why do I need IntelliSense for this? Well, when you're picking up Tailwind, the hardest part is to kind of understand the syntax and terminology they use. I love the statement from their founder that if you can resist the urge to retch long enough to give it a shot, you'll wonder why you used anything else. And I kinda agree.

It took me a while to get used to using Tailwind, but now I have a hard time going back to just vanilla CSS. But the extension, you know, if you wanna download it, we've left the link in the description as always, you can easily click the extensions icon search for tailwind CSS IntelliSense and then press the install button. Once it's installed, you're gonna get IntelliSense for all the weird tailwind syntax, right? So why would you need this specific extension? There are three main features that I think are kind of game changers.

It's probably like a little bit of hyperbole but they're really helpful when you're working with Tailwind for sure. And I don't like to work with Tailwind without them because there's so many parameters to remember, not parameters, thrown word, but classes. And I can't keep up with them all.

This is kind of my cheat sheet, right? So the first feature is auto complete. When you open up some kind of CSS or maybe you're using Vue or React, whatever, when you're typing that and you're using like your apply statements, you get into the auto complete in the IntelliSense where when you type in text it starts giving you all the options for text. Do you want text small, medium, large? Do you want it to be this color, that color?

All those sorts of things are there. And it makes it easy for me to not remember. And usually, usually the syntax is similar to what I would have written in just CSS. So if I'm looking for something with CSS flex, normally I'm gonna start with flex. If I'm looking for something with CSS grid, normally I'm gonna say grid.

They kind of walk hand in hand. They're similar, not always exactly the same but similar enough that I can find it. And with IntelliSense, I can zero in on it. Okay, the second feature. Let me preface this with mistakes are going to be made.

You're gonna misspell something or you're gonna start looking for something in the wrong place. And that's where the linting capability really shines. It provides you that feedback right in your editor and it'll actually show in that problems view inside of Versus Code. And the best part about it is if you're kind of off just a little, it'll provide some hints like, did you mean to say text red-five 100?

And the great thing about that is it's kind of makes it discoverable. Like I might be kind of in the ballpark of the classing and styling I wanted, but that hint may give me the push I need to go in the right direction and get it set.

One feature I really like is the number three one for me. It's previewing the CSS. So if you hover over a tailwind class, it'll actually give you a tool tip that shows you the CSS that that class will generate. Some of these classes will generate more than one line of CSS depending on what you're choosing. And it's fantastic to kind of see that translation.

Really helps when you're writing the code that if you're not quite sure that text SM is what you want, you can mouse over it and see the CSS and go, oh yeah, yeah, it's changing my size right where I want it. That's the one I wanted. Or no, that doesn't seem right. Let me try something else. It speeds up all of my development and all my styling.

There's several ways to customize this extension and I'm gonna let you discover most of them. The one I do wanna point out though is some language support. There's a lot of languages already supported by the extension. But if you have a case where you need to add something special, this is maybe a bad example because I think it's already covered, but you can go into the preferences settings, go search for tailwind CSS, IntelliSense. And then there's an option it's called Tailwind CSS include language.

It allows you to just add records like a little table and you're providing it the file type you are using and then a language that it should handle that file type as. So you could add, you know, Vue and say, handle that as a CSS file or HTML or JavaScript. That way it supports that new in the same way that it would support that other file you're giving it. It's a nice little handy thing. I think it already supports Vue.

Vue files. But if you had something else you needed to add like a JSX file, for instance, you could add it there and get support on those extensions. I've really enjoyed using Tailwind CSS in a few projects. My personal website's using it right now in tandem with Nuxt JS. If you like Tailwind, I'd love to hear what you're building with it.

And I'd love to see some designs. Share those in the comments with me. And listen, if you liked this video, be sure to hit that like button. And if you wanna see more videos about Versus Code Extensions or developer life in general, be sure to hit subscribe and ding that bell to know when we release a new video. Until next time.