DEV Community

loading...
Cover image for What CSS approach do you use in NextJS?

What CSS approach do you use in NextJS?

madza profile image Madza ・1 min read

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?

Discussion (16)

pic
Editor guide
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

SCSS modules first.

Collapse
wjkawecki profile image
Wojciech Kawecki

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

Collapse
madza profile image
Madza Author

I like SCSS too, really gives you superpowers as the devs behind it claim πŸ˜‰πŸ˜€πŸ˜€

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

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.

Collapse
desmondchoon profile image
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 πŸ˜ƒ.

Collapse
madza profile image
Madza Author • Edited

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 πŸ˜‰

Collapse
wjkawecki profile image
Wojciech Kawecki • Edited

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.

Thread Thread
wjkawecki profile image
Wojciech Kawecki • Edited

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

Thread Thread
madza profile image
Madza Author

Awesome input! Thanks! πŸ™β€

Collapse
stevetaylor profile image
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.

Collapse
jrop profile image
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.

Collapse
1chris_alex profile image
Christian Alexsander

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

Collapse
almarrr profile image
Almar Groenewald

Mainly Tailwind, combined with some Global Style (styled components) generated settings.

Collapse
sfiquet profile image
Sylvie Fiquet • Edited

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

Collapse
madza profile image
Madza Author

Tailwind is great πŸ‘ As far as the Tailwind is designed, I feel it would go especially well with something like Svelte πŸ˜‰πŸ‘

Collapse
rommyarb profile image
L. Rommy Arbantas

Um.. Chakra UI ?