Slide 1 ----------- Slide 2 ----------- Part 1: Alright, let's talk CSS in Next.js, specifically focusing on where we import our styles. A well-structured CSS setup is absolutely essential for keeping our blog application maintainable as it grows. Part 2: The location of our CSS import directly determines the scope of those styles – whether they apply to a single component or the entire application. It's all about keeping things organized and preventing style conflicts. Slide 3 ----------- Part 1: First up: CSS Modules. These are designed for component-level styling. Part 2: We place the .module.css file (or .module.scss for Sass) right next to the component file itself. This establishes a clear connection between the component and its styles. Part 3: And the import? It happens directly within the component file. This localizes the styles, preventing them from accidentally affecting other parts of the application. It's like each component having its own self-contained style sheet. Part 4: Here's a typical example. We import styles from the corresponding module css file. Next.js handles the rest, ensuring the styles are only scoped to this component. Slide 4 ----------- Part 1: Global CSS applies to application-wide styles and is accessible in every component. Part 2: We usually create a globals.css file (or similar) to house these styles. Part 3: The crucial step is to import this globals css file into our root layout component, usually app/layout tsx. This ensures that the global styles are loaded on every blog page. You can further import styles from any package stored in the node modules. Part 4: A simple import statement in our root layout makes these styles globally accessible. This is the designated spot for styles that should be consistent across all pages. Slide 5 ----------- Part 1: Let's explore some additional styling options. Part 2: We've talked about Tailwind, but to reiterate, it's a utility-first CSS framework. Instead of writing custom CSS, you apply pre-defined utility classes directly in your HTML. Think classes like text-3xl font-bold for large, bold text. It's quick for development but can sometimes lead to long class names. Part 3: CSS-in-JS libraries let you write CSS inside your JavaScript components. While convenient, we generally recommend CSS Modules or Tailwind for our blog. CSS-in-JS can introduce performance considerations, especially with React Server Components, and might not be the most efficient solution in the long run. Part 4: CSS frameworks like Bootstrap and Material UI provide pre-built components and styling. They can speed up development but might add extra weight to your project if you only use a small portion of their features. Import them as external stylesheets.