非根目录启动Vite时Tailwind CSS未注入的问题

问题原因 #

当你从非项目根目录（src-cef）执行Vite命令时，Tailwind的content配置里的相对路径是基于当前命令执行的工作目录，而非tailwind.config.js所在的目录。这就导致Tailwind找不到./index.html和./src/**/*这些文件，无法生成对应的样式，进而出现警告和CSS失效的问题。

解决方案 #

方案1：修改Tailwind配置为绝对路径 #

修改tailwind.config.js，使用path.resolve结合__dirname生成绝对路径，确保无论从哪个目录启动服务，Tailwind都能正确定位到内容文件：

const path = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    path.resolve(__dirname, './index.html'),
    path.resolve(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {},
  plugins: [require("tailwindcss-animate")],
}

__dirname会指向tailwind.config.js所在的src-cef目录，通过path.resolve拼接后得到的是绝对路径，不受命令执行目录的影响。

方案2：指定Vite的工作目录 #

在启动命令中通过--cwd参数指定src-cef作为Vite的工作目录，这样所有相对路径都会基于该目录解析：

npx vite --cwd ./src-cef --clearScreen --host=localhost --port=3000

这种方式无需修改配置文件，直接让Vite以src-cef为根目录运行，Tailwind的相对路径就能正常匹配文件。

方案3：在PostCSS配置中明确Tailwind配置路径 #

如果之前尝试指定Tailwind配置路径没生效，可在postcss.config.cjs中用绝对路径指定tailwind.config.js的位置，同时配合方案1的绝对路径配置：

const path = require('path');

module.exports = {
  plugins: {
    tailwindcss: { config: path.resolve(__dirname, './tailwind.config.js') },
    autoprefixer: {},
  }
}

这样PostCSS能精准找到Tailwind配置文件，结合方案1的绝对content路径，彻底解决路径问题。

内容的提问来源于stack exchange，提问作者Filip Szymański