What CSS approach do you use in NextJS?

NextJS has a nice built-in CSS support. I use CSS modules, meaning I don't have to worry about the class names, everything is organized, and associated just with the specific component.

They also have support for SASS, PostCSS, CSS-in-JS solutions like styled-jsx, low-level utility frameworks like Tailwind, etc. For global styles, you can import the global CSS file within pages/_app.js.

What CSS approach do you use in NextJS?

Comments

[Pacharapol Withayasakpunt]

SCSS modules first.

[Wojciech Kawecki]

Same here, SCSS Modules work great in my current Next.js project.

[Madza]

I like SCSS too, really gives you superpowers as the devs behind it claim 😉😀😀

[Aleksandr Hovhannisyan]

styled-jsx 100% (you can use it in Gatsby, too!). I used to be one of those devs who despised CSS in JS and strictly preferred SCSS, but styled-jsx is much better than, say, styled-components. Your CSS is essentially just another component, meaning 1) there's no new syntax to learn—all you need to know is CSS and React, and 2) you can interpolate JS. Also, it uses a variation of CSS modules under the hood to aggressively scope your classes locally.

[Desmond Chin]

I often go with CSS in JS, somehow a more productive approach for me. Dealing with just JS, instead of CSS. Besides, the number 1 React UI kit supports it; MaterialUI 😃.

[Madza]

I can see where you are coming from, as I still need to find out how to create both component and CSS module file at the same time and get them both linked automatically 😉
Doing it manually for now, and it takes quite a time, tho I still stick with CSS modules as they are still native to core CSS, which I currently prefer over CSS-in-JS solutions 😉 Might change in the future, tho 😉

[Wojciech Kawecki]

I am using plop and have an npm scaffold script, which takes a name of my new component and creates all required files for it: React component file, some sample mock data file, tests file and styles file.

[Wojciech Kawecki]

Oh, and also a Storybook story file, which I forgot to mention in prev comment.

[Madza]

Awesome input! Thanks! 🙏❤

[Sylvie Fiquet]

I gave Tailwind a try for my current project and it's pretty good.

[Madza]

Tailwind is great 👍 As far as the Tailwind is designed, I feel it would go especially well with something like Svelte 😉👍

[Jonathan Apodaca]

I really like styled-jsx: it's nice having the CSS + JSX in the same file. Although: I do want to give tailwind a spin to see how the workflow differs.

[Ochuko]

Is there a way to force NextJS into allowing global css imports in any file?

[Madza]

To add a global stylesheet to your application, import the CSS file within pages/_app.js. These styles will apply to all pages and components in your application. see docs

[Ochuko]

I know that, but I don't want all the CSS file imports in one file. I swung for CSS modules in the end, couldn't find anything on it

[L. Rommy Arbantas]

Um.. Chakra UI ?

[Steve Taylor]

I’m using styled components because that’s what I know. Lately I’ve been running into major bugs, especially since 5.2-ish, that have me looking at alternatives.

[Christian Alexsander]

I'm currently using Styled components for components customization and Material UI for build in components.