Let's get started with the T in tall stack. That is Tailwind. CSS Tailwind is a CSS framework with readily available CSS classes that you can simply include in your markup and style. Beautiful web pages very easily. So you're actually writing CSS behind the scenes, but with a great developer experience. Let's get a taste of it and then you can see how to set it up.

Let's get a taste of it and then you can see how to set it up. We have some markup here as you can see, a heading paragraph and a link, and they're not really styled right now with Tailwind, you can quickly add some prebuilt classes and make this look beautiful in no time. For example, to make this heading look bigger and bolder, we can make use of classes which are available in Tailwind, like text two Excel three Excel, four Excel and so on.

of classes which are available in Tailwind, like text two Excel three Excel, four Excel and so on. You can immediately see what is the style that it adds. So it text four Excel adds this CSS rule. That is, it sets the font size of 2.25 REM, or which is also 36 pixels. So let's quickly add text for Excel here and see what this looks like. So we quickly got a bigger font size. Let's also add some font weight using the

So we quickly got a bigger font size. Let's also add some font weight using the font utility glasses. Once again, you can see these suggestions. I'll show you how to get the setup done, but for now, let's get a taste of it. So you can say font bold, font, semi bold, font medium, and so on. Let me say font bold. And now let's add some color to it. Tale one, CSS has a lot

Let me say font bold. And now let's add some color to it. Tale one, CSS has a lot of colors also included in the framework. So if you're building a mockup or if you're not very particular about colors, you can pick from the amazing color palette that tailwind already has. These colors, uh, have different names like blue, indigo, purple, green, emerald, and so on. To add a text color,

purple, green, emerald, and so on. To add a text color, we use the text utility classes once again, followed by the color name, which you can check in the documentation. So let's say you pick a color like indigo, and then you see you have a lot of shades available in indigo. So starting from 50 and then it goes uh, in steps of a hundred, like a hundred, 200, 300 and so on up to 900.

and then it goes uh, in steps of a hundred, like a hundred, 200, 300 and so on up to 900. And then you have nine 50. So as you can see this color here, nine 50 is the darkest one available, whereas text indigo, uh, the 50 is the lightest available. You can use these shades as your text colors, as backgrounds, as borders, underlines, shadows everywhere. So for now, let me add text Indigo 600 as, uh, the color for this heading.

So for now, let me add text Indigo 600 as, uh, the color for this heading. That looks good. Maybe I can tone it down a little text. Indigo 500 looks great and I don't want this entire text to be sticking to the browser window, right? So let's add some padding to the diff. For padding, you simply have to say P followed by a number. P adds an overall padding. And what is this number?

followed by a number. P adds an overall padding. And what is this number? We have a lot of utility classes, as you can see, P 0.51, 1.5, and so on. So if you go to P two, you can quickly see what is the padding it adds. So you get 0.5 REM or eight pixels. Now this is a spacing scale that tailwind follows for all the um, utilities like padding margin, height, width and things like that.

for all the um, utilities like padding margin, height, width and things like that. You'll get a hang of it very soon once you start using it. But to quickly be able to calculate P two means eight pixels. So this number multiplied by four, gives you the value in pixels or divided by four, gives you the value in rem. So let me add, uh, P six for now. So that will add, uh, 24 pixels of pairing on all sites.

So let me add, uh, P six for now. So that will add, uh, 24 pixels of pairing on all sites. And now let me add a margin top to this paragraph. Using the margin utility classes, the way we added padding, we can add margin on all sides using m hyen, uh, you know, M zero, M1 and so on. But if you want add, if you want to add margin only at the top or at the bottom or at the left, you can use classes like MT or MB ml for margin left and MR for margin, right?

or at the left, you can use classes like MT or MB ml for margin left and MR for margin, right? So now that we need only margin top, let me pick mt and once again, it follows the same spacing scale. So I'll add something like MT two, which gives me eight pixels off margin top. Let's style this link. Now using, uh, classes, like let's say this link is inline right by default, links are inline style,

let's say this link is inline right by default, links are inline style, which doesn't let us add margins, uh, for it. So let's change this to inline block. Even those classes are available, um, you simply say inline block and it sets display as inline block, and now you're able to add March in top once again using empty. So let me say MT four or something like that.

to add March in top once again using empty. So let me say MT four or something like that. So here we have it. Let me change the color of this link to text Indigo 500 once again. And, um, add a font weight using font semi bold. Now, like this looks a little more like a link. Maybe I could change this margin, uh, to MT two itself. Okay, that looks better.

Maybe I could change this margin, uh, to MT two itself. Okay, that looks better. I can also add a text under the line by simply using the class underline. And that should do it. Yes, so you get the point. You can quickly add utility classes like these to make it look beautiful. Now that you got a taste of it, you would definitely want to install it in your own system, right? Let's see how to do that. If you go

to install it in your own system, right? Let's see how to do that. If you go to the Tailwind CSS website, you can notice that currently the version is V 4.1. Now let's go to the docks and try to install the latest version. Here you see there are lots of available options for installing tailwind CSS. If you are using wheat in your project, you can install using this particular flow.

If you are using wheat in your project, you can install using this particular flow. If you, you're using post CSS and nothing else, then you can follow this. But right now let's try and install tailwind in an empty project, something from scratch. So for this we use Tailwind CLI. The first step is to use this command, NPM install tailwind, CSS, and the CLI.

The first step is to use this command, NPM install tailwind, CSS, and the CLI. I'll copy this command. I have a brand new project. I don't have anything installed here, so let me do NPM in it. So I'm able to install tailwind CSS. All right. And now the, let's paste the command that I copied NP installed tail one CSS. Alright, it's installed. And now let me create a folder like public.

Alright, it's installed. And now let me create a folder like public. So we can have our markup in this. And within public, I will simply create an index HTML and also, uh, style css. All right, in index html, I will simply add the, uh, skeleton, change the title to Tailwind CS, s and body. Let me say hello tailwind, SS And um, right now we don't have a style sheet. So if you open this in the browser,

right now we don't have a style sheet. So if you open this in the browser, here's your, you will see a normal serif font with, uh, you know, the di black text default, whatever you see. So the next thing you do is import tailwind CSS into your main CSS file. So usually some frameworks have a main CSS file. In our case, we need to create one. Yes, it's not the CSS file style CSS, uh, this is not the main one, this is the output.

Yes, it's not the CSS file style CSS, uh, this is not the main one, this is the output. So we need a main input file, which we can add in the root of the folder. So let me add input css. And here, let me copy and paste that command import tailwind CSS is what you need to do. So paste this and let's see what's the next step? Start the tailwind CLI bill process,

So paste this and let's see what's the next step? Start the tailwind CLI bill process, though we can simply copy this command and start building with Tailwind css. So let me open the terminal right here and paste it. Let's take a moment to understand what it's doing. So basically we are using the tailwind CLI to take the input from input CSS and output it that is used tailwind to convert all those classes to actual CSS, which, uh,

and output it that is used tailwind to convert all those classes to actual CSS, which, uh, our browser can display and put it into this output file. And watch just keeps watching the changes. So now we have to change these parts to match our project. So if you can see the explorer, we have this input in our route. So we can change this to dot slash input. And the output is within our public folder, and we have called it Styles CSS run this.

And the output is within our public folder, and we have called it Styles CSS run this. So now if you open styles css, the one we created, it was empty. Now we have a lot of styles already. This is like that reset or normalized css. So now if you include this styles dot c CSS in our index, like using link style sheet and styles css. And now if you view this in the browser,

and styles css. And now if you view this in the browser, you'll notice a change. We still haven't added a single utility class, but notice that the font has changed to San rif and it's not rif tailwind adds, uh, a lot of those styles to begin with. And now you can do all that I did in the previous demo. So you can add padding, you know, like P five and see that all of your changes will start reflecting.

So you can add padding, you know, like P five and see that all of your changes will start reflecting. So we just used three commands and we were able to set up tailwind CSS. And now if you look at style Cs s, if you scroll down to the end, you'll start seeing all those classes getting converted to actual CSS right here in the utilities layout. So this is all you need to know for now. In the next lesson, we'll actually start building those job cards that we need for our project.

In the next lesson, we'll actually start building those job cards that we need for our project.