Next.js 15配置TailwindCSS v4排版插件遇配置文件缺失的解决方法

1. 手动创建tailwind.config.ts文件 #

在项目根目录（与next.config.ts同级）新建该文件，填入以下基础配置：

import type { Config } from 'tailwindcss';
import typography from '@tailwindcss/typography';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [typography],
};

export default config;

注意根据项目结构调整content数组路径，确保包含所有需要应用Tailwind样式的文件（尤其是Markdown/MDX文件）。

2. 在组件中使用prose类 #

给包裹Markdown内容的元素添加prose类（可搭配其他Tailwind类自定义样式）：

// 示例：渲染Markdown的组件
import { MDXRemote } from 'next-mdx-remote/rsc';

export default function MarkdownContent({ content }: { content: string }) {
  return (
    <div className="prose max-w-none">
      <MDXRemote source={content} />
    </div>
  );
}

3. 重启开发服务器 #

修改配置文件后，必须重启next dev服务，让Tailwind重新加载配置并生成对应样式。

额外检查项 #

• 确认已安装排版插件：

  npm install @tailwindcss/typography
  # 或使用yarn/pnpm
  yarn add @tailwindcss/typography
  pnpm add @tailwindcss/typography
  

• 若需自定义prose样式，可在tailwind.config.ts的theme.extend中配置：

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#2d3748',
            a: {
              color: '#2b6cb0',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  

内容的提问来源于stack exchange，提问作者himu73