Vue项目添加Tailwind后启动提示找不到tailwind.config.js报错

Error: ENOENT: no such file or directory, open 'C:\Users\username\Desktop\vue-tailwind-naive\tailwind.config.js'

操作流程：

• 执行vue create project-name初始化Vue项目
• 执行vue add tailwind添加Tailwind插件，流程中选择*minimal（最简）*配置选项
• 依赖安装完成后核查：package.json内tailwind、autoprefixer依赖存在，postcss.config.js、vue.config.js文件生成正常、配置无误
• 执行项目启动命令时，触发上述找不到tailwind.config.js的报错，无法定位根因

选择minimal（最简）配置安装Tailwind插件时，插件默认不会自动在项目根目录生成tailwind.config.js文件，但Tailwind的PostCSS加载逻辑默认会强制读取项目根目录下的该配置文件，文件缺失时就会抛出ENOENT文件不存在报错，不属于依赖安装异常。

1. 在项目根目录执行命令，手动生成Tailwind配置文件：
   npx tailwindcss init
   执行完成后根目录会生成默认的tailwind.config.js文件。
2. 打开生成的配置文件，补全content字段，指定Tailwind扫描样式的文件范围，避免后续构建出现样式丢失问题，Vue项目可参考以下配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 检查项目入口文件src/main.js（TS项目为src/main.ts）顶部是否已引入Tailwind基础样式，未引入的话补充以下代码：

import 'tailwindcss/tailwind.css'

4. 重启项目开发服务，报错即可消除。

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