This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Tailwind Setup" Lesson
[00:00:00]
>> Our project is built, it's ready to go. Let's go ahead and stop it just here for a second. And we're gonna run a bunch of installs, and I'm just gonna copy and paste it out of here. We're gonna run all of these installs right here. Let's talk about them for just a second.
[00:00:21] The first one is postcss here. Under the hood, Parcel has already been using postcss this entire time, you just didn't know it. This is the part or the the tool that transpiles your futuristic CSS into older CSS. It's just like Babble but for CSS, it's a transpiler for CSS.
[00:00:41] The part that actually does the transpilation from futuristic to old CSS is called autoprefixer. This is going to go and automatically, if you're trying to support IE 11, it'll transpile your gradients to those old style Internet Explorer 11 gradients, right? It does those kind of translations for you.
[00:01:00] And then we're gonna install Tailwind CSS. And we do this fancy aliasing, but it's basically going to make this package, which is a compatibility layer between old postcss 7 and the new postcss 8 that Tailwind 2 requires. So this is just an alias of that package. They do this so that you can use it with Parcel, basically.
[00:01:22] And then we're gonna reinstall it again, just so we can get the command line interface. That's why we're installing it twice. Don't worry, it's only gonna install the package once. So just copy all of that so you don't have to type out all of it. And we're going to paste that.
[00:01:40] As soon as we have post or Parcel 2, this compatibility layer will not be necessary anymore, because Parcel 2 has postcss 8 in it. So just be aware of that. So we'll load all these or install these dependencies. So kinda to just show you here, anytime that we say require tailwindcss, we're just gonna get this package instead.
[00:02:08] That's what that alias thing means. Probably don't need to know that, I rarely have to use it, but it's a useful thing to know. Okay, and then the next thing that we wanna do here is npx tailwindcss init. So what this does is this will go into our Node modules directory.
[00:02:32] And inside of your Node modules directory, this is a .bin folder. And inside of that .bin folder, there's a bunch of available binaries that your packages install for you. So one we can see here is eslint, it has its own binary that you can run. So if I said npx eslint, it would run this eslint, right?
[00:02:52] That's the connection I'm trying to draw here. One of them you'll see down here is tailwindcss. We can do npx tailwindcss then commands, right? So that's what we're gonna do right here is we're gonna tailwindcss, it's gonna run this binary, and then we're gonna run the init command, which is going to generate a config for us.
[00:03:10] If you've ever done TypeScript and npx tsc init, it's a similar idea. So you should see here Created Tailwind config. And now if we go back to our File Explorer here, out of this you'll see that we have this tailwind.config.js. That should look something like that, very bare bones of just here's a bare bones Tailwind project ready to go.
[00:03:43] Okay, good so far? Now we have a base level config here. We haven't done anything with it, but it exists. The next thing that I want you to do is I want you to go into your source directory and go to your style.css. And just Cmd+A delete, all of it.
[00:04:00] So all that CSS is gonna be gone. And I want you to go put in @tailwind base, @tailwind components, and @tailwind utilities. Now if you're on VS Code like me, I imagine many of you are seeing some underlines underneath this tailwind. And you would probably like to make it go away, right?
[00:04:31] I imagine many of you are like me don't like underlines, that tells me something's wrong, and something's not wrong here. So again, this is just if you're in VS Code, Cmd comma or Ctrl comma to go to Settings and search for css.lint.unknown at rules. Yours is probably on warning and just change it to ignore.
[00:04:56] And then you should be able to go back over here and see these are not underlined anymore. Basically, your built in bare level CSS linter is just saying hey, I don't know what tailwind is. I'm gonna make sure that you know what tailwind is. And we're just telling it, please stop telling me.
[00:05:11] Don't talk to me, I don't wanna talk to you anymore, right? That's kinda what we're doing there. So what is this? These are directives that come in from Tailwind that bring in a bunch of base classes and components and utilities. That now we have these new augmented Tailwind CSS capabilities, that that plugin that we installed in for postcss is going to use for us.
[00:05:38] Another thing that I'm just gonna have you install here, again, if you're on VS Code. Go into your extensions, search for tailwind, and there's one called Tailwind CSS IntelliSense. This just makes it super easy, it's going to make suggestions when you're writing class names. It's like, hey, this looks like this thing that you're trying to type,, I'm going to suggest that you keep typing it this way.
[00:05:57] It's very, very convenient, especially if you're writing a lot of Tailwind. Okay, so now we have Tailwind, it's all set up and should be ready to go. And we can go ahead and get started here writing some Tailwind. So the first thing is let's delete this. You might need to stop and start your, Your dev server from Parcel.
[00:06:27] So let's just go ahead and do that. Mine wasn't running, but if you are still running it, just go ahead and stop it and start it again. Anytime you make any configuration changes to Parcel, like Babble changes or postcss changes, just a good idea in general to go ahead and just change it or to stop it and start it again.
[00:06:50] Okay, so that should start up again. And if you should go look at your application, it will look beautiful. Just stunning, gorgeous unstyled HTML. You can see here I was very diligent in getting the same image size every single time. But look at that dog, she's so cute, okay.
[00:07:15] So the first thing I'm gonna say here is, there's a bunch of old class names in our project. So if we go look at like app.css or js or something like that, you can see a bunch of these are gonna have. Well, this one doesn't, but let's look at maybe details.
[00:07:29] These have class names in them already from the previous course, right? From styling the previous course, like this one. You can leave them, you can delete them, they're not gonna make any effect now because we're not using those class names anymore. But if you see me leave them somewhere it doesn't matter.
[00:07:49] Okay, So let's go to app.js. Inside of app.js, we have this div right here and we wanna add some styling to it. So in this particular case, we would like to make it have 0 padding and 0 margin. So how do we do that with Tailwind? Well, what we're gonna do, Is we're gonna add a class name here.
[00:08:21] className =, we want it to have 0 padding, so we're gonna put p-0, pretty simple. We want 0 margin, so we're gonna say m-, maybe you could guess. Yeah, 0, we're gonna have m-0. So this is what signifies to Tailwind I want 0 padding and I want 0 margin.
[00:08:47] What if I wanted a little padding? 1, what if I wanted a bit more? 9, right? There's just numbers there. It goes from 1 to 12 and then it starts kind of skipping around, it goes 14, 16, 20, 24, 28, 32, 36, 40, all the way up to 96 is the highest number that it has.
[00:09:11] And so what's cool about that is that's a lot of class names. But what Tailwind actually does for you is it just goes in detects, you only used p-0 and p-8. And I'm only going to include those classes, then it leaves out the rest of the classes automatically based on the build process, right?
[00:09:25] It kind of like tree shakes your styles, which is neat, right? Then you get the minimum viable CSS, which is to say that your Tailwind CSS files are going to be microscopic. They're gonna be absolutely tiny, it's gonna be the bare minimum styles you need to accomplish what you need.
[00:09:42] Your trade-off here is that your class names here are going to get very long, [LAUGH] right? Cuz if you wanna apply a lot of styles like sometimes you do in CSS, they can tend to get pretty long. So this is the trade-off that you're making here. Okay, so p-0, m-0, I'm good with that.
[00:10:02] What if I wanna give it a background image? There's no class that I can give it. So here I have to actually use a style directly. Cuz there's no fancy way of doing a class name that brings in a URL, right? Does that make any sense? So some of these things, we do have to actually go into the style tag and give it a background.
[00:10:20] So we wanna give it a style equals double curly braces there. And you wanna give it a background of url. And then here we're gonna put a URL of what we actually want that background image to be. So it's gonna be http://pets-images.dev-apis.com/pets/wallpaper. And then here, you can put A, B, or C, I'm gonna do A.
[00:10:58] And the original one is B, and there's also a C as well, up to you. All right, so I'm gonna save that now. And let's go take a look at our application. So we have a nice little background now. And if we look at this Inspect Element on the background, on the p here.
[00:11:30] You know what I forgot to do? I forgot to make the postcss config, that's what it is. So right now, postcss doesn't know that it's supposed to be picking up the config. So let's do that. We're gonna make a new file here and it's gonna be in the current, or sorry, the root directory of your project.
[00:11:49] Call it .postcssrc. So in your postcssrc, you need to have an object here that's gonna have a plugins top level item here. And then here gonna have an autoprefixer. And we don't have any configuration for autoprefixer, if you did, this is where you would put it. And then for tailwindcss, same thing.
[00:12:14] We need postcss to know this exists, so go look for it, cuz I won't use it until then. But at that point, it'll have all this stuff and it can do that. So let's go ahead and stop and start our server again. Now we can come back over to Adopt Me.
[00:12:35] And let's go back to the homepage here. And if we Inspect Element here, And we look at the top one here, p-0, m-0. There we go, finally. So let's recap the steps that we took there. Cuz some of you might be kind of caught in that loop that I got caught in myself.
[00:13:04] Create a postcssrc file. In there you need to put this, right, where it has the plugins, the two things that you need. The autoprefixer, cuz we still want it to prefix old CSS or new CSS for us for old browsers. And then tailwindcss. And again, these are gonna be empty objects, cuz we're not gonna configure them, okay?
[00:13:26] Then what I need you to do is I need you to stop your Parcel server. Or you can actually even do it here, let's just do it from here so you can see what it looks like. So stop your Parcel server. Delete the .cache directory, delete the dist directory.
[00:13:44] And then go ahead and say npm run dev again. This will take a while to start up, cuz it's got a lot of stuff to get through. So it might take you 10, 15 seconds. But once you get there, then you should end up with this. So now if I inspect the element here and I look at this p-0, m-0, you can see the p-0 is bringing in a 0 padding and a 0 margin.
[00:14:10] You also notice that the typography will change, right? It'll go from that default weird looking Times New Roman stuff to something a little bit more pleasant. It's probably something sans serif there. There you go, ui-sans-serif is what it is. So let's just go through all the steps that we make sure that we.
[00:14:30] The first thing you need to do with run all of these npm installs, right? Then you should've done the npx tailwindcss init, which will generate a tailwind.config.js file for you here. That tailwind.config.js file, we didn't touch, should just look exactly like that. Once you have that, you should change your style.css file to look like this, tailwind base, tailwind components, and tailwind utilities.
[00:15:02] These are some VS Code things, you don't need to do that necessarily. Okay, and then here we just added, I mean, we just changed out that div at the top of app.js, right? This one here, Just changed that. Okay, and I think that's all I've done. The question I might have for you is, what version of Node are you using?
[00:15:33] So if you do node -v, I'm getting 14.9 at the moment
>> I have 14.15
>> Yeah, that should be fine.
>> I'm 14.15 as well, which I believe is the latest stable version.
>> So I would say delete your .cache, delete your dist, delete your Node modules, and then reinstall everything again.
[00:15:52] So do npm install again, and then run npm run dev again after that.