Tailwind CSS is perhaps as popular as next J itself. So while it's not something that you need to know in order to use Next js, it's very likely that the real world projects that you will be working on will use Tailwind to understand how Tailwind integrates with Next js. We will simply create a new next JS project using Create Next app, which is something that we are already familiar with. And a key thing to remember over here is that when it asks us, would you like to use Tewin CSS, we are going to say yes. And for the rest of the options, we will just use the defaults.

During the installation process, you can see that there are two new practice that are being installed as dev dependencies. One is post CSS, tailwind. CSS actually works by using post CSS and then of course the Tailwind CSS package. Once the project install is complete, let's open it up within our IDE and discuss its key configuration points. The first while we will look at is package, Jason, and as we've mentioned, it now contains two additional dev dependencies. One is post Cs S, and this is what Tailwind uses internally

to generate it css. And then we have the Tailwind CSS package. Then we have the post CSS config module J script, and this is something that next Gs we'll pick up automatically and our core entry point for configuring Tailwind Right now, all it's doing is adding the Tailwind CSS plugin into the post Cs s workflow. Then we have the configuration file for Tailwind itself, which is Tailwind dot configure ts. And the key thing to note over here is the content property, and it's been configured to pick up any source file that might be present in the SRC directory.

Finally, our global CSS file has been modified and it contains at Tailwind directives to include a few key things. Tailwind uses these directives to generate the CSS that next year's will publish as a part of our global CSS. Now that we understand a bit more about how Tailwind is configured, let's take a look at how to use it and understand its core value proposition. To demonstrate Tailwind, we have a simple page that renders out a button component. The button itself is just a thin wrapper around the browser native button element,

and our objective is to customize this using tailwind. Now, one thing that you will notice over here is that by default, tailwind brings in some base styles that unify the look of common elements. For example, buttons across different browsers. So while it doesn't look like a browser default button, it gives us a clean starting point so that we can customize it exactly the way that we want. The fundamental way in which you use Tailwind is by using its class name utilities. To begin, we assign a class name with the button component, and then we use utilities provided by Tailwind. For example, cursor Pointer is a utility by Tailwind,

and this will generate a CSS class name for us called Cursor Pointer. That will set the cursor to be pointer. Now everything that you can do with standard CSS, you can pretty much also do using Tailwind class name utilities, for example, using Text base. We can set the font size and the line height. We can set the color of the text, we can set some padding, provide a nice rounded border, enable CSS animation transitions, and set the duration to be 300 milliseconds. Provide a nice background color using BG Dash, and then we can also use modifiers,

so when the user is going to hover over the button, we want the background to change to Blue 700. Now, in addition to providing these utilities, tailwind itself is actually also a design system, so these values like P two Blue 500, blue 700 are a part of the default design system that Tailwind is configured with, and it's worth knowing that you can customize this design system later on if you want to. Using the tailwind config file that we looked at, and now with just a few class name utilities, we have a fully customized button At this point. It's worth looking at

what's actually happening under the hood. If we inspect the element in the dorm, you can see that it has the class attribute and you can see the CSS classes that were actually generated by Tailwind during development, and of course it'll also do it during production. There is a lot more to tailwind, but one thing worth pointing out is that in addition to using it in H-T-M-L-J-S-X and TSX files, you can actually also use it in your CSS files. As an example, we have a button that is currently being styled using Styles button and styles of the default import from a CS S module. So as you might recall from a CS module lesson, this means

that there is a button glass name present within the module file. Currently, the contents of the Cs s class are empty and we can start writing a SS properties and values, but we can actually also compose it out of Tailwind CSS utilities. To do that, we simply use the applied directive provided by Tailwind and then use the Tailwind utilities that we previously looked at. At this point, you can see that it does result in a shorter CS file. Of course, normally you would have these utilities within your JSX, but you can move it to the CSS file as we have done over here. If you are struggling to manage it within your HTMO

and just need a different form of code organization. In terms of behavior, it behaves the same as far as the user is concerned. We have a styled button, but it's good to look at what's happening under the hood. As you would expect, we have a class name that is generated using CSS modules and the content of the class are actually being generated using Tailwind.