Tailwind CSS

Tailwind CSS 是一個 CSS 框架，它提供了一組預定義的 CSS 類別，可以快速設定元素樣式。您可以按照官方的 Next.js 的 Tailwind CSS 文件來設定您的 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: []
}

下一步，建立一個 CSS 檔案給 Tailwind 指令，例如 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