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.