Laravel 9根目录的tailwind等配置文件是否正常？如何迁移至resources/js？

根目录出现配置文件是预期情况吗？ #

是的，这完全是正常预期的结果。Laravel官方推荐的Vite+Tailwind集成流程中，tailwind.config.js、postcss.config.js和vite.config.js默认就会生成在项目根目录，这样Vite和Tailwind的工具链能直接读取配置，无需额外配置路径。

迁移配置文件到resources/js后的修改步骤 #

要把这三个配置文件移到resources/js目录且保证功能正常，需要修改以下几处：

1. 调整package.json中的Vite脚本命令 #

把vite.config.js移到resources/js后，需要告诉npm去哪里找配置文件。修改项目根目录package.json里的脚本：

"scripts": {
  "dev": "vite --config resources/js/vite.config.js",
  "build": "vite build --config resources/js/vite.config.js",
  "preview": "vite preview --config resources/js/vite.config.js"
}

2. 修正vite.config.js内部的路径和配置 #

移动后的vite.config.js在resources/js目录，需要调整资源文件的相对路径，同时指定PostCSS配置的位置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['../css/app.css', './app.js'], // 调整为相对于当前配置文件的路径
      refresh: true,
      postcss: './postcss.config.js', // 指定同目录下的PostCSS配置文件
    }),
  ],
});

3. 更新postcss.config.js的Tailwind配置路径 #

把postcss.config.js也移到resources/js目录后，修改其中指向Tailwind配置的路径：

export default {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' }, // 指向同目录的tailwind配置
    autoprefixer: {},
  },
};

4. 确认模板中的Vite指令无需修改 #

模板里的@vite(['resources/css/app.css', 'resources/js/app.js'])保持原样即可，Laravel的Vite插件会根据配置文件里的input路径自动正确解析资源位置。

5. 验证配置有效性 #

运行npm run dev，看终端有没有报错，再打开页面检查Tailwind样式是否正常加载、工具类能否生效。如果出现路径错误，重点检查各配置文件中的相对路径是否对应正确。

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