Styling in NextJS

Next.js allows several possibilities for styling:

• Built-in support for CSS and Sass which allows you to import .css and .scss files (still needs npm install sass)
• Built-in support for CSS modules via import ./mycomponent.module.css which will automatically generate unique class names. Next.js’s code splitting feature works on CSS Modules as well. It ensures the minimal amount of CSS is loaded for each page.
• CSS-in-JS libraries such as styled-jsx (built-in support), styled-components or emotion
• Using popular CSS libraries like Tailwind CSS

To load global CSS files, create a file called pages/_app.js and import styles/global.css for example:

1
import '../styles/global.css'
2
// also direct imports from node_modules are allowed
3
import 'bootstrap/dist/css/bootstrap.css'
4

5
export default function App({ Component, pageProps }) {
6
  return <Component {...pageProps} />
7
}

This App component is the top-level component which will be common across all the different pages. You can use this App component to keep state when navigating between pages, for example. You cannot import global CSS anywhere else.

Customizing PostCSS Config

Out of the box, with no configuration, Next.js compiles CSS using PostCSS. To customize PostCSS config, you can create a top-level file called postcss.config.js. This is useful if you’re using libraries like Tailwind CSS.

1
npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes

1
module.exports = {
2
  plugins: [
3
    'tailwindcss',
4
    'postcss-flexbugs-fixes',
5
    [
6
      'postcss-preset-env',
7
      {
8
        autoprefixer: {
9
          flexbox: 'no-2009'
10
        },
11
        stage: 3,
12
        features: {
13
          'custom-properties': false
14
        }
15
      }
16
    ]
17
  ]
18
}

1
module.exports = {
2
  purge: [
3
    // Use *.tsx if using TypeScript
4
    './pages/**/*.js',
5
    './components/**/*.js'
6
  ]
7
  // ...
8
}