Skip to Content
Nextra 4.0 is released. Read more
DocumentationAdvancedTailwind CSS

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:

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: []
}
💡
Tip

You can use tailwind.config.ts as well.

Create globals.css file

Create a CSS file for Tailwind directives, globals.css for example:

globals.css
@tailwind base; /* preflight styles */
@tailwind components;
@tailwind utilities;
Note

You don’t need to have @tailwind base directive while using nextra-theme-docs or nextra-theme-blog because they already imports Tailwind CSS preflight styles in their style.css files.

Import styles in root layout

app/layout.jsx
import '../path/to/your/globals.css'
 
export default async function RootLayout({ children }) {
  // ...
}
Last updated on
MermaidLaTeX