Build a Fullstack App with Next.js, v2 Setup Styles & Tailwind CSS

Transcript from the "Setup Styles & Tailwind CSS" Lesson

[00:00:00]
>> All right, so now let's go ahead and actually configure our global CSS so we can actually get things looking the way they're supposed to look. So if we go to our notes here, we're going to use Tailwind CSS, we talked about this before. So to install Tailwind CSS is actually we already installed it with NPM so we don't have to.

[00:00:22] Really do anything. We just have to add a config and we got some more global stuff here. So what you want to do is you just wanna take this global CSS right here that we have, which I could walk you through, but basically React or Next.js's router. Adds extra divs around scroll containers.

[00:00:45] This is basically saying, give us back control of those scroll containers so we can do stuff without this. You can't get like full screen stuff. It's kinda weird. This is the number one thing that'll kill all apps, box sizing. Border box. These are gradients that I made to go in the background.

[00:01:03] Here's our glass thing that we already made. So you can overwrite that. And then same thing like before next year, yes, adding extra divs and giving it back to control for us. So it's going to copy all of that. If this thing well it doesn't wanna scroll for me, so I'm just gonna have to do it like this.

[00:01:23] Gonna go here, go to global, and I'm just gonna put that in there like that. Scroll down, do the same thing, so just some CSS in there.
>> Yeah. And they were saying the filter that you had just filter, instead if you scroll down, you now have backdrop filter.

[00:01:57] Cuz before you had filter and that was actually filtering out the text.
>> That was filtering out the text. Yeah.
>> Yeah, so now using backdrop filter, it's doing the thing that you-
>> It's doing the thing that I wanted to. Yeah, yeah. Yeah, that makes sense. It looked weird when I was writing it but I went with it.

[00:02:14] [LAUGH] So yeah backdrop filter it makes more sense. All right, and then now we need to set up our Tailwind config which I kind of already have here. You don't really need it because it kind of already knows where everything is other than like this app directory so we want to set that up for the app directory.

[00:02:39] So what you want to do is just on your root of your project you want to do Tailwind config. I also think there's an NPM or a command to do this with a CLI would tell me I just never use it so can't recommend it what it is but I think they do have one, I just always just do it from scratch because it's really not that much.

[00:02:58] So what we're gonna do here is like a Tailwind config Did I spell that right? Till when I thought it was like a different color if I did Or was it tailwind dot config? Yeah Tailwind dot config. I know there's an icon for that, so when you don't get those icons, you know you got the file names wrong.

[00:03:25] So go to module dot exports because we're back in JavaScript land and we're TypeScript in this file and for the contents we just need to put the file names like this and actually we can hint at this JavaScript file to give us some TypeScript if we do something like this.

[00:03:43] So we can add in these comments and then we can just say like. To add type, which is like a TypeScript directive to hint to the JavaScript that like, hey, here's a type that's made for TypeScript, but we want to use it in JavaScript. That way we can get some auto completion here.

[00:03:58] So you can say, type, and then it's just, it's just like, kind of like an import statement. So you'll say imports in the way that I have it here. Let's see. I just have it here I was copied. This is saying this type is Tailwind CSS config type.

[00:04:18] If we write this in TypeScript, we could just import that type but we're not. So for the content then we just want to go ahead and add the gloves for. The files that have the components that we want apply these to, which in this case is just going to be like the app directory.

[00:04:33] And I think the way you do this, it's going to be like app and then you can do the glob the catch all, then probably the extensions. So in our case, TSX. We're only using that but just to be safe, might as well do that. Might as well do that and might as well do that too I guess, just to be safe.

[00:04:54] And we'll do the same thing for pages, which we probably won't be using, but hey, set yourself up. And then we definitely are using components. Like that. Cool. And then for theme, really the only thing we really care about here is gonna be the fonts. So we're gonna extend the theme which I believe until when just exactly what sounds like allows you to extend the theme and not override it with something other value, which is if you didn't put extend that's what happened.

[00:05:27] We learned that out the hard way and we want to change the font family here and what we want to change it to is this CSS variable that we're going to set inside of our layouts so we're just gonna say Sans and then. We're gonna use this font like this, font enter.

[00:05:47] So if you've never seen CSS variables or properties, that's what it looks like when you declare them. And we're gonna set this in a layout so it just works. Okay, and the last thing we need to do is add these directives to our global CSS. So let's do that.

[00:06:10] Go to our global CSS at the very top. We'll just add those things If line five looks weird. What this is saying is, apply this style to the Tailwind base layer. These are all considered layers Let me say we're applying this to the layer called base. Okay, any questions on that?

[00:06:49] OK. Let's go see. No, not this one of the great, it's not the full one. OK. All right. So we still got to add some costs here because the whole one's obviously messed up. Let's go check out the other ones. No we didn't do register we did sign it right.

[00:07:14] I think we did sign it. Here we go. So it's not quite but we got obviously Tailwind has kicked in, the glass stuff seems to be somewhat blurry, there's definitely a gradient going on here. We still got a lot more CSS to write when we get to the pages but for the most part Tailwind has kicked in