Module 5: Styling & Fonts

Tailwind CSS

Next.js has built-in support for Tailwind CSS. It's the recommended way to style applications.

Configuration

The tailwind.config.js file controls your design system.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the 'app' directory
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Utility Helpers

When conditionally applying classes, use clsx and tailwind-merge.

npm install clsx tailwind-merge

// lib/utils.js
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// Usage

  {/* Result: "bg-green-500" (red is correctly overridden) */}

Next.js Fonts

next/font automatically optimizes your fonts (including custom fonts) and removes external network requests for improved privacy and performance.

Google Fonts

// app/layout.js
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    
      {children}
    
  )
}

Local Fonts

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

CSS Modules

For component-level CSS without Tailwind, use CSS Modules (.module.css).

/* styles.module.css */
.dashboard {
  padding: 20px;
}

import styles from './styles.module.css'

export default function Dashboard() {
  return 
...
}