Let’s now talk about CSS styling.
As you can see, our index page (http://localhost:3000) already has some styling. If you take a look at pages/index.js, you should see the code like this:
<style jsx>{` … `}</style>
This is using a library called styled-jsx. It’s a “CSS-in-JS” library — it lets you write CSS within a React component, and the CSS styles will be scoped (other components won’t be affected).
Next.js has built-in support for styled-jsx, but you can also use other popular CSS-in-JS libraries such as styled-components or emotion.
Next.js has built-in support for CSS and Sass which allows you to import .css and .scss files.
Using popular CSS libraries like Tailwind CSS is also supported.
In this lesson, we’ll talk about how to write and import CSS files in Next.js. We’ll also talk about Next.js’s built-in support for CSS Modules and Sass. Let’s dive in!