Styling Overview

[00:00:00]
>> We lay the groundwork for the groundwork, and now we're about to build some really exciting stuff. So we left off on our layouts and templates. And just to recap, we basically added some links to our layout here. But then I think I went in and kinda just cleared out this homepage.

[00:00:21]
I'm also just gonna go in and just clear out all the CSS in here that's not Tailwind. You don't have to do this. I'm sick of looking at a dark theme right now, so I just got rid of it. And then the other thing is we also have this layout here that we're gonna have for our dashboard.

[00:00:40]
We'll configure this in a minute. So yeah, that's kinda where we are right now. The next thing I wanna talk about is styling, because as we did this last exercise, we went through Tailwind and talked about adding class names and stuff like that. So if you don't know Tailwind, it's a CSS library.

[00:00:57]
I can show you what it is. Well, it's actually a JavaScript library that creates CSS. Snd basically, you can add these classes to your elements like so and here's the appropriate matching CSS that goes for it, so it's pretty cool. It's a really neat way and a very widely accepted way to style your components with just using classes and your React components and things like that.

[00:01:23]
So that's what we're using very robust, very useful, but there are other ways to style CSS in Next.js, so we're gonna talk about some of those and go through them. But I would say, unless you have an opponent library that already has some third-party component library that already has styles associated with it, I wouldn't say Tailwind is the best.

[00:01:43]
There's really no answer. In programming, as you'll soon find out, as you start working more, there really isn't a right answer. There's just trade-offs, right, everything has a trade-off. There's never a perfect solution. It's just like, which trade-off are you willing to deal with? And CSS is no different than that.

[00:02:00]
So let's talk about some of those. So styling, the most simplest way is just making a CSS file and then importing it, right, and we already see an example of that in our layout. You can see here, we're just importing this global CSS file. Note that when you import a CSS file, there isn't some thing here that you're importing, right?

[00:02:19]
It's just importing it, right, and it just works somehow. So how is that? Well, it's because of the tool that's building Next.js for us. If you've used Create React App, you might have noticed or learned or read that it uses something called webpack. Webpack is a tool built in node that builds your code for you.

[00:02:41]
So you might ask yourself, why do I need something to build my code for me? Well, up until just recently, browsers didn't have modules in them, right? So you would have to have written all your code and script tags and global space and add the script tags yourself.

[00:02:54]
When I was learning to write code, that's what we had to do. It wasn't until three or four years in my career where like, you can do modules on the front end. But before that, we were just using something, I can't even think of the name of the tool, Gulp.

[00:03:07]
And then there was something before Gulp, forgot the name of it.
>> Grunt.
>> Grunt, there it was, as grunt. I'm like picturing a pig, and I'm like,
>> [LAUGH]
>> I'm figuring the word. I'm like, I forgot what it's called. But it was grunt. And we used something like grunt to put in our script tags for us.

[00:03:20]
And then we did window.app equals window.app or empty object, you know what I'm talking about. So we had to do stuff like that. Well, now, it's like, well now, let's just simulate modules. They're emulating a module system in the browser. They're creating it and they're adding it to the top of the file.

[00:03:36]
So we get that for free. So there's a tool that's doing it for us. Create React App uses something called webpack to do that, which is by far the most popular one out there. Not the only one, not the only useful one, but it's the most popular one.

[00:03:48]
Next.js, by default, I think now, it's switched over to its new one that's based off Rust now. But they also have an experimental one, I think they call it SWC that is also in Rust that does things. So you don't need a tool written in JavaScript to build JavaScript, cuz these are just files.

[00:04:04]
You can manipulate files in any language that runs on your computer. Rust just seems to be fastest. But anyway, long story, that just means that tool is handling what happens when this file gets imported. So although all you have to do is import it. The tool when it sees this import, it's doing things for you automatically, like taking this CSS, putting it in a file, adding it as a link tag somewhere in your HTML, and making sure that everything has access to it.

[00:04:34]
All that is happening for you for free so you don't have to do it, and this allows anything to be a module. So you can import an image, you can import a font. If there's a way for that bundler to handle that file extension, then you can import it.

[00:04:51]
So that's the reason we don't have to worry about what happens here. Although with something like webpack, you could change the behavior. I'm lke, you know what? When I import a CSS, convert that to a string. I just want a pure string text version of that. So maybe I do get a variable here that I have to do something like give it a name and do from, and because that's the loader that I configure it.

[00:05:12]
But by default, we don't have to. This is configured for us. I mean, if I go check here, I would imagine that it's probably somewhere up here in the head. Yeah, here we go, it's here, it was definitely added here. So you can see that the tool made this for us and added the link tag to that CSS.

[00:05:34]
Where you can see here's all of our Tailwind stuff that got loaded, so we didn't have to do it. Here it is.