DocumentationGuideCustom CSS

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:

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;
}

You can create a pages/_app.js file and import your CSS files there:

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

To learn more about CSS support in Next.js, check out the Next.js documentation.

Next.js I18nSearch