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.

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

_app.jsx

import '../path/to/your/globals.css'
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}