Styling Tips

Here are some styling tips that might be helpful.

You can just read through the following sections. No need to make changes to our app!

Using clsx library to toggle classes

clsx is a simple library that lets you toggle class names easily. You can install it using npm install clsx or yarn add clsx.

Please take a look at its documentation for more details, but here's the basic usage:

• Suppose that you want to create an Alert component which accepts type, which can be 'success' or 'error'.
• If it's 'success', you want the text color to be green. If it's 'error', you want the text color to be red.

You can first write a CSS module (e.g. alert.module.css) like this:

.success {
  color: green;
}
.error {
  color: red;
}

And use clsx like this:

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

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.

Here are the steps to add Tailwind CSS. First, install the packages:

npm install -D tailwindcss autoprefixer postcss

Then, create a postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

We also recommend configuring content sources by specifying the content option on tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // For the best performance and to avoid false positives,
    // be as specific as possible with your content configuration.
  ],
};

To learn more about custom PostCSS configuration, check out the documentation for PostCSS.

To easily get started with Tailwind CSS, check out our example.

Using Sass

Out of the box, Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

Before you can use Next.js' built-in Sass support, be sure to install sass:

npm install -D sass

That's it for this lesson!

To learn more about Next.js's built-in CSS Support and CSS Modules, check out the CSS Documentation.