Styling in NextJS

NextJS has lots of stuff related to Styling, Here are the things we can use for styling

1. CSS Modules

2. Tailwind

3. CSS-IN-JS

4. SASS

Let's see all one by one:-

1. CSS Modules:-

   If you are a Vanilla CSS person, this is one of the best options for you, Next.js has built-in support for CSS Modules using the .module.css extension.

   it's scoped to a component/page, and it helps to not get overwritten CSS classes, it uses POSTCSS to write unique classes so that classes do not get overwritten.

2. Tailwind:-

   For writing code in React/NextJs, we have tons of Components, so making styles Separately gave us a huge tabo, For removing this stuff, we use Tailwind, which is easy to configure in NextJS, we configure Tailwind while creating a Project, just you need to do yes for Tailwind

   

   Here's how you can write code in Tailwind in NextJS

   

3. CSS-IN-JS :-

   CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components.

   You can check which libraries are supported in CSS-in-JS here

   If you want to style Server Components, use CSS Modules or other solutions that output CSS files like Tailwind CSS.

4. Sass/Scss:-

   Next.js has built-in support for integrating with Sass after the package is installed using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scssor .module.sass extension.

you can install Sass by using this command

    npm install --save-dev sass

I will say the best thing to use with NextJS is Tailwind, due to its utility Classes, which helps to write logic and CSS in the same file without creating different files or classes, or if your code needs SSR for styling, it is good to go option.

Thanks for checking this, If you are confused about what is difference between Client Side Rendering (CSR) and Server Side Rendering (SSR) you can check this blog

Happy Coding🎉