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
//page.js
import styles from "./page.module.css";
export default function Home() {
return (
<div>
<h1 className={styles.title}>Hello world!!</h1>
</div>
);
}
//page.module.css
.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
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Now configure tailwind in your app by adding paths to your files in tailwind.config.js.
/** @type {import('tailwindcss').Config} */
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 base;
@tailwind components;
@tailwind utilities;
Now, add some classes to your element to test
export default function Home() {
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
Top comments (0)