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!
clsx
library to toggle classesclsx
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:
Alert
component which accepts type
, which can be 'success'
or 'error'
.'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>
);
}
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.
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
To learn more about Next.js's built-in CSS Support and CSS Modules, check out the CSS Documentation.