Tailwind CSS

Tailwind CSS is a CSS framework that provides a set of pre-defined CSS classes to quickly style elements.

Follow the official guide

Follow the official Tailwind CSS guide for Next.js to set up Tailwind CSS for your project.

Create the `globals.css` file

Import Tailwind CSS into globals.css:

globals.css


@import 'tailwindcss';
 
/* Optional: import Nextra theme styles */
@import 'nextra-theme-docs/style.css'; /* or nextra-theme-blog/style.css */
 
@variant dark (&:where(.dark *));

Import styles in the root layout

To apply the styles globally, import the globals.css file in your root layout file:

app/layout.jsx


import '../path/to/your/globals.css'
 
export default async function RootLayout({ children }) {
  // ... Your layout logic here
}

Tailwind CSS

Follow the official guide

Create the globals.css file

Import styles in the root layout

Create the `globals.css` file