nextjs tailwindcss prose 如何美化code

要在Next.js中使用Tailwind CSS和Prose美化代码，可以按照以下步骤进行操作：

首先，确保已经在项目中安装了Tailwind CSS和Prose插件。可以使用以下命令进行安装：

npm install tailwindcss @tailwindcss/typography

在tailwind.config.js文件中启用@tailwindcss/typography插件。打开tailwind.config.js文件，并在plugins部分添加以下代码：

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

在_app.js文件中引入Tailwind CSS样式。打开_app.js文件，并添加以下代码：

import 'tailwindcss/tailwind.css'

使用Prose组件包裹代码块。在需要美化的代码块周围使用<div className="prose">或<article className="prose">标签来包裹。例如：

import React from 'react'

const MyComponent = () => {
  return (
    <div className="prose">
      <pre>
        <code>
          // Your code here
        </code>
      </pre>
    </div>
  )
}

export default MyComponent

这样就可以使用Tailwind CSS和Prose来美化代码块了。根据自己的需要，可以进一步自定义样式，例如调整字体大小、颜色等