Custom CSS Support

Nextra is 100% compatible with the built-in CSS support of Next.js , including .css, .module.css, and Sass (.scss, .sass, .module.scss, .module.sass) files.

For example, consider the following stylesheet named styles.css:

body {  font-family:  'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial',  sans-serif;  padding: 20px 20px 60px;  max-width: 680px;  margin: 0 auto; }

To apply your global styles, import your CSS file in the root layout file:

import '../path/to/your/styles.css'   export default async function RootLayout({ children }) {  // ... Your layout logic here }

For more information on how to use CSS in Next.js, check out the Next.js CSS Support documentation .