Tailwind CSS

Tailwind CSS 是一个提供一系列预定义 CSS 类来快速设置元素样式的 CSS 框架。您可以按照官方的 Tailwind CSS 文档（Next.js）为您的 Nextra 项目设置 Tailwind CSS。

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 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:

globals.css


@tailwind base; /* Apply Tailwind's base styles (Preflight) */
@tailwind components; /* Include component styles */
@tailwind utilities; /* Include utility classes */

Note

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:

app/layout.jsx


import '../path/to/your/globals.css'
 
export default async function RootLayout({ children }) {
  // ... Your layout logic here
}

Tailwind CSS

Create tailwind.config.js file

Create the globals.css file

Import styles in the root layout

Create `tailwind.config.js` file

Create the `globals.css` file