00:00 Let's start by creating a post-css.config.js file right here and I'm going to copy our config that we had in our instructions and stick that there. This is going to give us nesting in our Tailwind

00:13 classes and then the Tailwind CSS plugin itself so that we can actually use apply and the other directives that are supported by Tailwind. And then auto-prefixer so we don't have to worry about vendor prefixing anything regardless of whatever cool things we're using. And then let's also add

00:32 a Tailwind.config and this one we're going to do a ts because Tailwind actually supports TypeScript configuration which will be nice for our type checking. So I'll copy all of our stuff our config into here and so here it's saying that our content is in the app directory all

00:49 JavaScript TypeScript files in our app directory that's where our class names are going to be. And then we have a little bit of an extension of the theme for our font family. This is an entire subject unto its own and we're not going to go any deeper on the configuration for Tailwind

01:05 in this workshop. So with both of those files implemented then we can finally create our app styles Tailwind file. So let's go app styles Tailwind.css and we'll stick these directives

01:20 in there that brings in some of the utilities and the components and the base and all that stuff that we need for Tailwind to do its magic. So with all of that set up we need to actually restart the server. So I'm going to stop the app and start it up again so that it can notice

01:40 these new configuration files and properly compile our CSS. So now the last thing we need to do is actually bring in that file. So import Tailwind stylesheet URL from styles Tailwind and then we'll

01:56 add that stylesheet right here. Thank you Copilot. We'll save that and now you'll notice we had a little change right there we no longer have that padding and margin and stuff and that's because Tailwind actually ships with its own normalize stuff so it gets rid of the default padding and

02:10 margin on the body and and all of those other things that are slightly different in all browsers so it normalizes everything and now we're in a pretty good spot there. So you'll see we have our

02:22 Tailwind CSS custom properties and various other things here. We can see we have our link for the Tailwind file and so we can actually go look at that Tailwind file which will look very different from our Tailwind CSS file here. So if we look at public and then build assets and then Tailwind

02:43 right here there we go. So here is our Tailwind file the the top part of this is all primarily the CSS reset that I talked about earlier and then the bottom part of this is the extra stuff

02:57 that we're adding. So it has a p8 and a text xl because we actually have a comment with that right here so let's try and actually apply those and make sure that those actually get applied.

03:10 Save that and ta-da it looks great. Yeah Tailwind looks good on you. So that's what you do to get PostCSS and Tailwind running in your Remix application. You simply configure them and then Remix will automatically pick up those bits of configuration and apply that to the CSS that

03:30 you import and from there you can do your CSS nesting because we have that plugin installed for PostCSS config and then we also have the Tailwind configured and so we can use these Tailwind directives which ultimately will look up in our Tailwind config to know how to apply those

03:50 directives properly and that is getting Tailwind running in our app and all of a sudden our application is going to look much nicer than if I designed it myself. So that is everything that you need to know to get that applied. Also I think it's important to call out the fact that this again

04:08 is in our build directory and it has our fingerprint on that file so as we're making changes and adding different things here we can say remember that starts with an x3. If I add

04:20 our text is small now then we see that's an xb now and so as the content of that file changes our fingerprint will automatically change the cache will get busted and all browsers will get the latest version of our CSS file. And the really cool thing about Tailwind is that CSS file will

04:39 very rarely if ever get over the size of 15 kilobytes which regardless of how big your application gets which is pretty pretty significant. This is one of the reasons why I think Tailwind is just so fabulous is because the user experience for users using an app that is

04:56 styled with Tailwind is so phenomenal that it can be really difficult to have a really large application keep its CSS scoped down to so little amount of CSS and yeah so keeping everything under

05:10 15 kilobytes yeah that's pretty good. So I'm super excited to be using Tailwind let's move on to the next bit.