Introduction to Next.js 13+, v2 CSS Modules & Third-Party Libraries

Transcript from the "CSS Modules & Third-Party Libraries" Lesson

[00:00:00]
>> Okay, speaking of scope CSS, let's talk about CSS modules. So if we wanted to create CSS modules, it's the same thing as next JS 12, nothing has really changed. So for instance, I have this component, I have a button anywhere, I'm just gonna do it here. I can say button.module.CSS.

[00:00:19] If I use a .module.CSS., this creates what's called a CSS module. CSS module is not something next Jas created. I wouldn't say it's a standard well, I guess now it is a like standard in the community about how to make CSS modules, but it's basically exactly what it sounds like, it's like CSS as a module.

[00:00:38] So what is the module nozzles like? A scoped, independent piece of code that can't be compromised by some other piece of code because it's scoped, it's not global, and that's what a CSS module is. It basically, when imported will randomize and generate class names, that you can use inside of your components so they're guaranteed to be unique and never collide with each other.

[00:01:03] There are other ways to make scoped CSS using browser API's like Shadow DOM and things like that but this is just randomizing class names for you which does the same thing, well, it doesn't do the same thing but you get the same effect. So the way you would write that is, I can make any class I want.

[00:01:20] Let's see I'm have a button class, and I can write some CSS for it. Whatever I want here. I'll be like that, and then with the same name with the class that I have, first I'll import, I have to import the styles and typically you see something like this styles from button.module.css.

[00:01:51] And then this is gonna be an object, and the properties on these objects are gonna be the class names in the file. So it'll be styles.button. If I had another class in here it will be styles dot that class. So each property, each declaration has a property on the styles objects, and then I can just apply it to wherever I want.

[00:02:09] So in this case, I can say class name is gonna be whatever styles.button classes. And that's gonna be the generated class name that the build system will generate for this. So it's scoped, so what the browser sees and what the component sees is not button, it sees 01567, whatever the class name that got created, and we're just putting it here.

[00:02:35] So that's that's how the modules work. Yes.
>> Could you style divs for instance, all divs and then would it be styles that div?
>> So you mean just like a tag name like this?
>> Yeah.
>> Would it be styles actually, I've never tried to do a tag name before.

[00:03:01] I would argue you don't start all this [LAUGH].
>> [LAUGH]
>> I would say don't do that. Instead, what you probably wanna do is use, so what you can do is you can do something common like that and then you might have something like div one and then you can say can you go?

[00:03:25] Thank you. You can say my God, go away, composes, common, you do that. And CSS module, that's not regular CSS, but the CSS modules, you can do that. So this will, like, inherit the stuff here, and then you can make all these divs that you want. Yeah, but yeah, probably don't style all your divs.

[00:03:50] Just dial IDs. Yeah, you just dial IDs. Pretty sure it's the same thing. So if I said item. My god, thank you, okay. And then you can go and I'm pretty sure it's just the same thing.
>> I can't remember, does Next.js support SAS out of the box or is there some other libraries you need to import?

[00:04:18] Or like maybe Tailwind or some like that?
>> So there's support for Tailwind, it's actually quite simple to set up. If you go to the Tailwind docs, they'll walk you, I mean, there really is no setup, for Tailwind, you only really have to add the directives at the top of your global file like @tellwinbase, @tellwinutils, and there's a third one.

[00:04:39] And then you set up your tellwin config and you're done. There's really nothing else you have to do. There's nothing special about it. As far as SaaS, it does support SaaS. You just have to install SaaS yourself, cuz it doesn't install it, I think you have to tell next JS is config that you want to use Sass, which basically is like extending the bundler that is using which depending on what version of next Jas you're using.

[00:05:04] And what flags you passed next as JS using Webpack or you're using, they're rusty one and now they have this even newer one that's like super, like on the edge. We're not even using that one but that was really cool. And yeah, I just need to tell that thing.

[00:05:18] Hey, I wanna use Sass now. So it does support those things but I used to use a lot of. Whats the one that I use? I use stylus. I really liked stylus and then at some point, I just stopped using them. And I'm trying to remember what happened.

[00:05:32] I think I moved into CSS and JS. I just stopped using them. But now I'm kind of moving back to writing CSS in the files with modules and things like that because it's just easier with server components. Doing CSS and JS with server components, it is a huge undertaking and it's a lot of work to do that and that's why I'm not talking about it here but yeah of course.

[00:05:56]
>> Regarding Tailwind CSS shout out to Brian Holt Intermediate React v5 which just launched, it's got a section on tailwind CSS. And that course is modular. So you can just do that lesson if you want.
>> Yeah. And it will work. Whatever he says in that course will work for next year.

[00:06:12] So there's nothing specific to next JS that you have to do for tailwind.
>> I believe you can pass the create next tab, a flag, like example with tailwind and they'll just do that simple setup for you.
>> Yeah, I used to really not tailwind because I don't know I always just like look at it and if I got to sit down and learn all these classes, I might as well just use a component library that's already styled, cuz it's the same amount of time as learning.

[00:06:43] But then I started using component libraries and all the work I needed to get them to look the way that I wanted. And I was like, I need something a little more raw. So then I actually landed on something called Headless UIs, which Tailwind actually made a library called Headless UI.

[00:06:55] It's like a component library that has no style and it's meant to be styled but it has pure functionality and then you can add whatever styles you want to that and I was like, okay now tailwind makes sense because I really just want a component library that had no style but was functional.

[00:07:08] And then I can add Tailwind classes to that. But the missing piece for me was how to create variants based off props. And then I found this library that allows you to create variants really easily. So combining all three of those, I was like, all right, Tailwind's amazing, but only if I use it in that way.

[00:07:23] So I still don't like the fact that I gotta look up all these classes. I also don't like looking in JSX and seeing super long class names everywhere. It's really annoying cuz I think it's just distracting. But I have to admit, tailwind is a really cool library and it does have really good styles, so I like it.

[00:07:42] So just a little rant about me hating on tailwind, but I think they're dope, sorry tailwind, cool. Any other questions on styling? The only other one that I want to cover with styling was basically, how to use third-party styles. So if you installed some styling off of NPM like bootstrap or reset CSS, how do you import that other than Tailwind because Tailwind is different?

[00:08:08] Because by the way, Tailwind is not a CSS lib. Did you know that? Like I thought it was just a CSS lib. It's not a CSS lib. So a JavaScript library and the CSS is generated and it looks at your class name statically. At, runtime to determine what CSS to generate.

[00:08:26] It's really advanced. I did not know that I thought I went to go look at the source code, I was like, where's the CSS file? And it was it. I was like, wait, it's not a CSS libraries it's JavaScript. And then I was like, okay, this is a really cool, I kind of like this.

[00:08:38] So, yeah, and that's why you can't use interpolation in your class names for tailwind values, because the just in time compiler, can't interpolate those values, they have to statically see them. I'm like, this is actually really cool. So, I was really impressed. I think that was the selling point for me.

[00:08:57] But yeah, so I mean importing other stuff is very similar to importing global CSS. Honestly, you just import it like this. If it's from NPM, you just import it like this, that's it. Just put it in the layout though. Import it in your layouts, hopefully your layouts cuz it's global.

[00:09:18] If it's not global, it should be a module, and imported in that file, that's it. Now if you wanna use something like styled components or something like that, that's a little more advanced with server components, it's actually quite involved. So stay tuned to my full stack course that we'll be working on that when we walk through that, cuz it is actually quite involved and there's a lot going on there to get it to work with server components.

[00:09:46] You basically have to combine all the CSS that's generated from stock components yourself and create your own style sheet on demand on the server and render that. It's a lot of work, I didn't wanna do that, [LAUGH] today.