Tailwind CSS

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

要在您的 Markdown 文件中使用 Tailwind 类，您还需要将 .md 和 .mdx 文件添加到 tailwind.config.js 中的 content 列表中。

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

下一步，为 Tailwind 指令创建一个 CSS 文件，例如 globals.css

globals.css

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

然后导入到 pages/_app.jsx 中

_app.jsx

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

Mermaid LaTeX