Tailwind CSS
Tailwind CSS is a CSS framework that provides a set of pre-defined CSS classes to quickly style elements. You can follow the official Tailwind CSS documentation for Next.js  to set up Tailwind CSS for your Nextra project.
Create tailwind.config.js file
To use Tailwind classes in your Markdown files, you will also need to add .md
and .mdx files to the content list in tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./app/**/*.{js,jsx,ts,tsx,md,mdx}',
'./content/**/*.{md,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,jsx,ts,tsx,md,mdx}'
],
theme: {
extend: {}
},
plugins: []
}You can also use a tailwind.config.ts file if you prefer TypeScript for your
Tailwind CSS configuration.
Create the globals.css file
Create a CSS file for Tailwind directives, globals.css for example:
@tailwind base; /* Apply Tailwind's base styles (Preflight) */
@tailwind components; /* Include component styles */
@tailwind utilities; /* Include utility classes */If you’re using nextra-theme-docs or nextra-theme-blog, you don’t need to
include the @tailwind base directive. These themes already import Tailwind’s
preflight styles in their style.css files.
Import styles in the root layout
To apply the styles globally, import the globals.css file in your root layout
file:
import '../path/to/your/globals.css'
export default async function RootLayout({ children }) {
// ... Your layout logic here
}