There are 3 ways to style component :
1- CSS modules
2- Global
3- library like Tailwind
CSS Modules
File has extension .module.css
import the file in the page component
import styles from “./page.module.css“;
export default function Home() {
return (
<div>
<h1 className={styles.title}>Hello world!!</h1>
</div>
);
}
.title{
font-size: 36px;
}
Global
You can import global.css in any file, but it’s good practice to add it in top level component like : layout.js.
It’s used to add CSS rules to all routes in your application such as CSS reset-rules….. etc.
Tailwind
First install Tailwind in your app
npx tailwindcss init –p
Now configure tailwind in your app by adding paths to your files in tailwind.config.js.
module.exports = {
content: [
‘./app/**/*.{js,ts,jsx,tsx,mdx}‘,
‘./pages/**/*.{js,ts,jsx,tsx,mdx}‘,
‘./components/**/*.{js,ts,jsx,tsx,mdx}‘,
],
theme: {
extend: {},
},
plugins: [],
}
Import your tailwind css directive in your global file globals.css
@tailwind components;
@tailwind utilities;
Now, add some classes to your element to test
return (
<div>
<h1 className=“text-3xl font-bold underline”>Hello world!!</h1>
</div>
);
}
⚠ If you have a struggle with it and tailwind classes doesn’t show in your app try to close your app and run it again by : npm run dev
