Next.js项目安装TailwindCSS后未生成tailwind.config.js文件求助

你执行的npm install -D tailwindcss postcss autoprefixer仅安装了所需的开发依赖，并未自动生成Tailwind的配置文件。按以下步骤完成配置文件生成与集成：

• 生成配置文件
  在项目根目录运行这条命令，同时创建tailwind.config.js和postcss.config.js：

  npx tailwindcss init -p
  

  其中-p参数会自动生成关联Tailwind的PostCSS配置文件。

• 配置内容扫描路径
  打开生成的tailwind.config.js，修改content数组，确保Tailwind能检测到项目中所有使用其样式类的文件：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      // 如有其他自定义文件路径，可添加至此处
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 导入Tailwind全局样式
  在app/globals.css（Pages Router项目为styles/globals.css）中添加以下指令：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

完成以上操作后，重启Next.js开发服务器，Tailwind即可正常使用。

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