Lesson 1: CSS Modules
CSS Modules provide a scoped and modular approach to styling your components. By using CSS Modules, you avoid naming conflicts and ensure styles are applied only where intended.
How to Use:
- Create a CSS file with the .module.css extension (e.g., styles/Home.module.css ).
- Import it into your component:
import styles from ‘./Home.module.css’;
export default function Home() {
return <h1 className={styles.title}>Welcome to Next.js</h1>;
}
extension (e.g., styles/Home.module.css ).
- The imported styles object maps class names to unique identifiers.
Advantages:
- Automatic scoping of CSS.
- No need to worry about global namespace pollution.
Lesson 2: Styled JSX
Styled JSX is a built-in CSS-in-JS solution provided by Next.js. It allows you to write scoped styles directly within your components.
How to Use:
export default function Home() { return (
<h1>Welcome to Next.js</h1>
);
}
Features:
- Scoped styles ensure no CSS leakage.
- Dynamic styles can use JavaScript variables.
Dynamic Styling Example:
export default function Home() { const isActive = true;
return (
return (
<h1>Welcome</h1>
);
}
Lesson 3: Integrating Tailwind CSS
Tailwind CSS is a utility-first CSS framework that can be easily integrated with Next.js for rapid styling.
Installation Steps:
- InstallTailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npx tailwindcss init
- Configure tailwind.config.js to enable JIT mode and specify content paths:
module.exports = {
content: [‘./pages/**/*.{js,ts,jsx,tsx}’, ‘./components/**/*.{js,ts,jsx,tsx}’], theme: {
extend: {},
},
plugins: [],
};
content: [‘./pages/**/*.{js,ts,jsx,tsx}’, ‘./components/**/*.{js,ts,jsx,tsx}’], theme: {
extend: {},
},
plugins: [],
};
- AddTailwind to your global CSS file (e.g., styles/globals.css ):
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;
- Importthe global CSS file in pages/_app.js :
import ‘../styles/globals.css’;
function MyApp({ Component, pageProps }) { return
}
export default MyApp;
Advantages:
- Rapid prototyping with utility classes.
- Fully customizable design system.
Leave a Reply