Tailwind CSS

Tailwind CSS は、要素にすばやくスタイルを適用するための定義済み CSS クラスのセットを提供する CSS フレームワークです。公式Tailwind CSS の Next.js ドキュメントに従って、Nextra プロジェクトで Tailwind CSS を設定できます。

Markdown ファイルで Tailwind クラスを使用するには、contentリストにある.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} />
}

マーメイド LaTeX