We have already covered styling in React in our previous lecture, let's zero in on the specifics of CSS in Next.js, mainly where we can import different types of styles. This is a crucial aspect for organising our blog application effectively.

• CSS Modules: These are designed for component-level styling and should be imported directly into the component where they're used. The typical pattern is to place the .module.css file (or .module.scss for Sass) in the same directory as the component itself. This keeps the styles closely tied to the component, making our codebase easier to manage.
• Global CSS: Global styles, as the name suggests, apply to the entire application. Therefore, they need to be imported into a component that's rendered on every page. The ideal place for this is your root layout component, usually app/layout.tsx. Importing global CSS here ensures that these styles are available throughout your blog.
• Tailwind CSS: With Tailwind, you'll typically have a globals.css file (or similar) where you include the @tailwinddirectives. This file, containing your Tailwind setup, is then imported into your root layout (app/layout.tsx), just like global CSS. This makes the Tailwind utilities available across your entire application.
• External Stylesheets: If you're using CSS from an external package (like Bootstrap), you can import it directly into any component where you need those styles. Often, this is done in the root layout (app/layout.tsx) if the external styles are intended to be global, or within a specific component if the styles are only needed there. Just remember, you must import the stylesheet directly from the npm package or a colocated file; you cannot use <link rel="stylesheet" />.
• Sass: Sass files, whether they are module-specific (.module.scss) or global (.scss), follow the same import rules as regular CSS files. Module-specific Sass goes into the corresponding component's directory and is imported there, while global Sass can be imported into the root layout.

Key takeaway: The location of your CSS import depends on the scope of the styles. Component-specific styles (CSS Modules and sometimes external stylesheets) are imported into the components themselves. Global styles (global CSS, Tailwind setup, or global Sass) are imported into the root layout to ensure they're applied everywhere. Keeping this pattern consistent will make our blog's styling much more maintainable.