nextjs V13 router模式 tailwindcss 的prose 能否只使用dark模式

是的，你可以在Next.js V13的router模式中使用Tailwind CSS的prose类，并将其限制为仅使用暗模式。下面是一种实现方法：

首先，在你的Next.js项目中安装并配置Tailwind CSS。你可以按照官方文档进行操作。

然后，在你的tailwind.config.js文件中，将darkMode设置为class，如下所示：

module.exports = {
  darkMode: 'class',
  // ...
}

接下来，在你的CSS文件中定义prose类的样式，并添加一个与暗模式相关的类。例如，你可以创建一个名为prose-dark的类，并在其中定义暗模式下的样式。然后，使用dark类来切换暗模式。下面是一个示例：

@layer base {
  .prose-dark {
    @apply prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto dark:prose-dark;
  }
}

@layer utilities {
  .dark .prose-dark {
    @apply prose-dark;
  }
}

最后，在你的页面组件中使用prose类，并将其包裹在一个与暗模式相关的条件中。例如，你可以使用useEffect钩子监听暗模式的变化，并根据其值来添加或移除暗模式类。下面是一个示例：

import { useEffect } from 'react'

export default function MyPage() {
  useEffect(() => {
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

    const setDarkModeClass = (e) => {
      document.documentElement.classList.toggle('dark', e.matches)
    }

    setDarkModeClass(darkModeMediaQuery)

    darkModeMediaQuery.addListener(setDarkModeClass)

    return () => darkModeMediaQuery.removeListener(setDarkModeClass)
  }, [])

  return (
    <div className="bg-white dark:bg-gray-800">
      <div className="prose prose-dark">
        {/* Your content here */}
      </div>
    </div>
  )
}

通过这种方式，你可以根据暗模式切换prose类的样式，从而使其只在暗模式下生效