This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "CSS & React" Lesson
[00:00:00]
>> We are done with hooks we're done with the sandbox code sandbox you can close code sandbox we're not coming back to it. And now we're actually going to get into our project so you can leave page that's fine. As a reminder to go in here to tailwind CSS, this is the next section here.
[00:00:24] You are going to start with a fresh copy of that 12 dash portals and refs. I have it here up, github/btholt complete intro to react to the seven projects. If you haven't already I told you earlier but if you haven't already cloned this and then just make a copy of this portals.
[00:00:47] And refs folder this is the complete project that you and I are going to start on for tailwind I already did that you can see here on my desktop. I have intermediate. I have that here I ran npm install but you can do it again if you want to 433 packages.
[00:01:12] Zero vulnerabilities that I always get surprised when I have no vulnerabilities, my code just seems like there's the new one every day, right? They're like this is a weak or there's definitely something already broken here
>> Makes you think that bad things broken
>> Yeah no there's definitely stuff here that we just don't know about yet anyway by the time unless you download and install this.
[00:01:34] It probably is, you can also always say MPM audit to figure out what they are. In general you don't have to care if this is all development stuff but that's how you look. Okay, so I think I have it opened here, I do, and you and I are going to, I do tailwind CSS.
[00:01:54] This is meant to be like an intro to it and how to make it work with react. This is not a complete course on tailwind CSS because it has actually merits its own course there's a lot of stuff you can do with tailwind So like I said, we're intentionally scratching the surface.
[00:02:09] This is more intentionally just to show you how to do it, where to do it, how to set it up and kinda the general paradigm of what you want to be thinking about with tailwind CSS. All right, so stop your server for just a second. I'm gonna say MPM.
[00:02:26] If you wanna be lazy like, probably should want to be. Go here to this and just copy and paste this whole string right there. I'm gonna type it out for you so you can see. Tailwind CSS, you can see I actually already have it in there, at3.0.22 As a reminder.
[00:02:49] I said this in probably before, but I'm having to install particular versions of this there probably by the time that you watch this, there are probably a new versions. There's probably already new versions for a lot of these things since I wrote this like a couple of days ago.
[00:03:03] But I know all these versions work together. And so I really get upset when like people take this course and install the latest versions and stuff doesn't work together because stuff changes over time. So all of these libraries that I'm showing you, they might bugs and vulnerabilities and things like that, that caused them to update the version.
[00:03:22] But in general, most of these are not changing. For a crazy amount between now and when you would watch this, we update this course quickly enough that generally we're pretty on top of those things. So that's why I'm having to install possibly old versions. We're more interested in new learning, and like learning the general high level concepts then like the absolute particular syntax Okay.
[00:03:49] So at a point 4.6. And then auto pre fixer at 10.4.2. Okay Again, cat dash capital D. This is MPM install dash dash save Dev. Or if you're lazy like me, I dash capital D, which is going to put it in dev dependencies, because you don't actually ship these things to production.
[00:04:20] These are tools that are used to build the project that then get shipped to production. And, frankly, it doesn't totally matter a whole lot. I Anyway, because the project is gonna get built and deployed anyway, so whether it's a dev dependency. Or dependency doesn't really matter, but that's the thought process that I'm going through.
[00:04:39] Okay, so now we have our project. So let's talk about what we installed. Tailwind CSS at version three. I think that's pretty self explanatory. That's the project that's going to do tailwind for us. Post CSS is like Babel, but for CSS, right? It's a code transformation tool that takes one set of CSS and outputs a different part of CSS.
[00:05:03] You can use this for anything that you want to do a CSS. You can have it, do stuff like non standard syntaxes It would be something like Sass not Sass, particularly cuz Sass is a different tool. But you could do things like that. We can use it for things like futuristic CSS, right?
[00:05:20] So if I want to write like CSS variables, for example, and I want to support IE 11. Post CSS allows us to do things like that right because IE 11 wouldn't support CSS variables. And then autoprefixer is basically like preset for babel where it takes new syntax and translates it to old syntax.
[00:05:41] It's called autoprefixer. Because if you remember, if you've been writing code as long as I have, we used to have to do things like dash Chrome or dash WebKit dash what's border radius, right? Things like that, that used to prefix all of your stuff so that it would work in all browsers.
[00:06:00] So, that's what we just installed. And now, we want to make a tailwind CSS configuration document. So, the easiest way to do that is MPX Tailwind CSS in it. And this will create like a bare bones starter configuration document here you see this just popped up here tailwind dot config dot j s and we're going to modify this just a little bit for our needs.
[00:06:35] So the first thing that we're gonna do is mode. jit, jit stands for just in time, in case you're wondering. This is the new mode of Tailwind CSS that you get better performance out of. We're gonna tell it content here, which is like the stuff that we wanna build, which we wanna build just stuff in source.
[00:07:01] And then we wanna build everything inside of source with anything HTML or JS. Okay, theme extends is fine. We'll use variants in a bit, but for now you can just have an empty variants. And that's it. Okay, good so far. Now, I want you to go to your style dot CSS document here, my beautiful, beautiful CSS that you should probably never copy.
[00:07:41] And I want you to do the most satisfying part of coding, in my opinion that you can ever do. Delete everything. I love to deleting code is literally my favorite part of my job. Like I feel like you're doing things right when you get to delete things. And then I want you to put three lines here.
[00:08:01] At tailwind base, at tailwind Components, at tailwind utilities. This is like a directive and that's what tailwind CSS, that library that we installed is going to do for us. This is basically saying like include all of these parts of tailwind so the base components the base parts the components parts and all the utilities.