Styling

Framework Next.js 13 Styling
Categories:
Tags:

Tailwind CSS

Install

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind

Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importing Styles

Setting tailwindcss

// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import css

// app/layout.tsx
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Reference

Dark Mode

Framework Next.js 13 Styling Dark Mode