Tailwind Essentials: Grid System | Installing VSCode Extension

CSS Tailwind CSS
Transcript

English (Auto-generated)

and that thing is uh installing the extension of the chill wind. So what we will get by doing that actually, you know we need to we need to go to the website to verify if the rose is actually something in the chill wind or you know uh this class actually exists or not. So there are many, many classes. I mean even I do not know many of the classes available on the Children. So there is a solution, you need to go to the extensions and you need to write you know tailwind and then you are going to get the here it is the tailwind CSS intelligence. This is actually a great tool. If I just simply you know scroll down, you can see that when you type pg it gives the B G transparent B G T also you you will get all the colors and you will get everything I mean related to you know be g red. So similarly the hover previews and everything I mean you know, so this is it. So there is some settings you can also apply if you want to. I mean the quick suggestions, you can updating settings improve. Okay, this is also a recommended option so we can follow all those things but for now I'm going to click on the install button and once I install that I'm going to go back there and now um if I write something I'm not going to get that but I'm going to press the control and its space. Once I do that there is the option. Now if I type container you can see that I got you know the container which is actually coming from tailwind. If I write you know B G B G. I'm gonna get the B. G. You know sorry B G. Um yeah B G current BG black and things like that so BG and you need to write you can you know scroll it and you're gonna get all the colors available. For example you want it to be B G. Amber. You just need to write, you just need to select PG amber and now you just need to save it. You need to go to the browser and you will go to the browser by npm. Run dev and facilities you are on the browser now. So anyway um these things are not required anymore anyways okay we already have this one but let's just cut it. Okay we will be talking about this later anyway here you can see that the text uh this the B. G. Of the specific this class became amber color. I mean the extension thing is actually cool. So this is it. I mean I just wanted to tell you that this is a great uh you know addition in your extensions collection if you have multiple extensions because it's all about the the tailwind and you just need to press the control and space and then you can write it you know so anyway there is one more benefit when you do that. I mean you install this extension so you just need to hover the mouse over any class and you are going to get the details. For example the you know the minimum with the minimum with you know it is literally belongs to the media query because we put MD. So I just hovered the mouse here and you can see that come on Here, all the data and everything. You can see that here it is. If I hover the mouse here, it is not related to media quivering because it's 70, it is not empty. So I hover the mouse here and you can see that the BG rose 400 is actually this color and the opacity is one. So you know the you know everything is here. The actual thesis behind this class. So I think that is cool. And if I hover the mouse over the uh the BG. Amber 800 and I'm going to get this be GM for 800. And then all this text, the actual thesis behind this amber thing. So in the next cast we're going to talk about something more interesting till then stay tuned
135 Views 0 Likes 0 Comments

In this Cast, we install and go over the VSCode extension.

Comment
Leave a comment (supports markdown format)