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 (opens in a new tab) to set up Tailwind CSS for your Nextra project.

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:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx,md,mdx}',
    './components/**/*.{js,jsx,ts,tsx,md,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,jsx,ts,tsx,md,mdx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Next step, create a CSS file for Tailwind directives, globals.css for example:

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Then import into pages/_app.{jsx,tsx}

_app.tsx

import React from "react"
 
import "../path/to/your/globals.css"
 
// This default export is required in a new `pages/_app.tsx` file.
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

You might need to restart dev server to see the change.

Mermaid LaTeX