on the code cast. And in this series we're actually going to discuss how to use tailwind with the react or any other Js framework react as, you know, the most simple or you can say the most un opinionated framework of the J. S. So this is why I'm choosing to react. So you absolutely can apply the tailwind with the angular, you can apply it with the next J. S. N. A lot. Anyway, so why tailwind when there are more options? The tailwind is actually is actually preferred to use with the Js frameworks? Um they claim to be, you know, a thing which is a utility first CSS framework. Actually, the bootstrap is also the utility First framework, but the bootstrap is not very good with the react. That is the fact, I mean when I'm talking about the reactor, I'm talking about the Js frameworks. So the bootstrap is not very good good with the Js frameworks, you can use the bootstrap when you're creating some html and CSS based product. So this is why the tailwind is important. So we're gonna talk how we can put the how we can use the the tailwind with the, you know, the react framework. Absolutely. They're going to be a little differences if you're coming from the html and CSS background because the reactors absolutely has its own fun in its own charm. But you're applying the tailwind will absolutely gonna make things wonder with react. So from the next video we're actually going to talk about, I mean how how to actually use the tailwind. But let's just discuss a little bit about it. I mean just have a little look of it actually it's a utility first CSS framework. So if you've use the bootstrap so you may know already about it. Actually, you know the W means with the M. D. Means the margin. Um the the P. T. Mean the P means actually the, you know the The padding. The LG means large. Sorry. MD means medium, not the margin. I'm sorry the 70 means actually the march the medium. Anyway, the edge auto, you know the height auto. So uh the utility first means actually you know it is not a bespoke CSS. It is utility first CSS So in the bespoke CSS this can be called the media. You know, this can be called something like you know the figure or any class or anything like that. It's the simplest style. We we usually usually create our own styles with that. So it seems opinionated. But with the utility first you actually, you know get the exact name which is similar to the to the actual utility it is providing. For example the text LG literally says it's gonna give us the large text. So instead of having a package we're gonna, you know, design the whole P tag it's good. It just provided us the, you know text algae instead of providing you a single a single class which is which is gonna cover the whole tagged with different elements. The tailwind allows you to put the, you know, separate styles by using their classes. So this is the basic logic of the, you know, the utility first. Anyway there is an API in the design system which is cool, you can absolutely apply that if I go to the component there are actually a thing, there is a thing, there is a way. So for example if you want some specific design, you just can click on the components as I went there and in the components, you know, if you want something like you know the heater section, you just can click on that and there is a hitter, click on the get code, get the code. Oh they're charging for that. I'm sorry. I mean you can, you can get the code by the way but this is not free. If I click on the get the code, they were absolutely going to take us to the Paid one, I'm going to go back to the normal and uh if I go with the marketing actually if I go with the hero section and if I yeah there is a code by the way. Yeah, you absolutely can buy. I mean you can have the pricing if you want but when I click clicked on the hero section there is an option. When I click on the preview, I'm going to get the preview of what I'm going to get if I apply it and when I'm, when I'm going to click on the code, I'm gonna get the exact code with the react, you can see that. So I just need to copy that all and I need to, you know, copy and paste it and I'm gonna have this preview and if I'm not using the react, I'm using the html, the plain html version, I absolutely can click there and I can get the different code for the html but I'm using the reactor. Absolutely. So I'm gonna choose this one or if you're going with the view, you can go with this way, I mean the view is a different thing. We are ready react for now anyway, so there are more designs, I mean this one is actually free, but if I go down, if I want this one then absolutely, I'm going to go through the pricing thing. So I mean they also provide you the fix, you know, uh the created gadgets, so you can use them. I mean this is also an option. So this is the tailbone guys and I think, you know, understand it. Beautiful joy components crafted with tailwind CSS. So this is actually the, the components they've created by their own self using the tailwind CSS. So it also gives them motivation. Absolutely. When I click there, it's gonna, you know, they're going to charge me for that. But there is also a motivation, I mean, you know, you, you can, you know, you know that you can create something like that using the the tailwind, um, CSS So in the next video, we're actually going to install the the project, the react project. And then we're absolutely gonna install the tailwind in the project and then we are going to continue this until then stay tuned.