Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Tailwind CSS

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Styling in Next.js

      Next.js provides a variety of options to style your application, ranging from basic inline CSS to advanced techniques like CSS-in-JS and using Tailwind CSS. Here's a detailed look at each method:

      1. Inline CSS

      
      The most basic way to apply styles is by using inline CSS directly in your JSX components.
      // app/about/page.js
      export default function About() {
        return (
          <h1 style={{ color: 'red' }}>Hello About!</h1>
        );
      }

      2. CSS Modules

      
      Next.js has built-in support for CSS Modules, which provide scoped CSS by default. By using a .module.css file extension, Next.js automatically treats the styles as CSS Modules.
      CSS Modules help create local CSS, essentially generating unique class names to avoid conflicts. This is ideal for component-level styling.
      // app/dashboard/styles.module.css
      .dashboard {
        padding: 24px;
      }
      Then, import and use this style in any file within the app directory:
      // app/dashboard/layout.js
      import styles from './styles.module.css';
      
      export default function DashboardLayout({ children }) {
        return <section className={styles.dashboard}>{children}</section>;
      }

      3. Global CSS

      
      Global CSS applies styles to all routes. It’s perfect for resetting or normalizing styles across the entire application.
      Global styles can be imported into any layout, page, or component within the app directory.
      First, create a global.css file:
      // app/global.css
      body {
        padding: 20px 20px 60px;
        max-width: 680px;
        margin: 0 auto;
      }
      Then, import global.css in the root layout (app/layout.js), and it will apply to every route in your app:
      // app/layout.js
      import './global.css';
      
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <body>{children}</body>
          </html>
        );
      }

      4. External Stylesheets

      
      You can also add styles by importing external CSS libraries. Here’s how:
      // app/layout.js
      import 'bootstrap/dist/css/bootstrap.css';
      
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <body className="container">{children}</body>
          </html>
        );
      }
      If you want to include a CSS file from an external CDN, like Bootstrap from a CDN, you can add a <link> tag in the root layout:
      // app/layout.js
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <head>
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
            </head>
            <body>{children}</body>
          </html>
        );
      }
      
      Important Notes:
      • Fast Refresh: When running your project locally with next dev, any changes to local styles (whether global or CSS modules) will be reflected instantly in the browser upon saving.
      • Bundling: When using next build, CSS files are bundled into fewer, compressed .css files, which reduces network requests and improves loading times.
      • JS Disabled: In production (next start), styles are loaded even if JavaScript is disabled, meaning CSS is not injected via JavaScript. However, during development (next dev), JavaScript is still necessary for features like fast refresh.

      5. Tailwind CSS

      
      Tailwind CSS is a popular utility-first CSS framework that allows you to create complex designs by composing small utility classes directly in your HTML. Tailwind is seamlessly integrated with Next.js and is used in many modern projects.
      When creating a new project with create-next-app, if you choose to include Tailwind CSS, the necessary configuration files are automatically generated. If not, you can add Tailwind manually by following these steps:

      1. Installation

      npm install -D tailwindcss postcss autoprefixer
      npx tailwindcss init -p
      This creates both tailwind.config.js and postcss.config.js files.

      2. Configuring Tailwind

      You don’t need to modify postcss.config.js. In tailwind.config.js, specify the paths to all files that will use Tailwind CSS classes:
      // 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: [],
      }

      3. Import Tailwind's styles

      Add Tailwind’s directives to inject its base, component, and utility styles into your global stylesheet:
      // app/globals.css 
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
      hen, import globals.css in the root layout (app/layout.js):
      // app/layout.js
      import './globals.css';
      
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <body>{children}</body>
          </html>
        );
      }

      4. Using Tailwind Classes

      Now you can use Tailwind utility classes directly in your JSX:
      // app/page.js
      export default function Page() {
        return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>;
      }

      5. VSCode Integration

      Install the Tailwind CSS IntelliSense extension in VSCode for enhanced support, including auto-completion and hover previews.
      Tailwind CSS has a vast array of utility classes. If you ever forget a class name, you can refer to a cheat sheet or Tailwind's official documentation.
      

      Summary

      
      Next.js offers flexibility in styling your applications, whether you prefer traditional CSS methods or modern approaches like Tailwind CSS. Understanding and choosing the right method can significantly improve your development workflow and maintainability of your application.