如何在Vite中同时以监听模式运行AlpineJS与TailwindCSS

背景 #

一开始使用独立版AlpineJS，后续尝试通过node_modules集成其他方案时，要么无法协同工作，要么需要大量配置调整。因此选择通过Vite安装AlpineJS，再添加TailwindCSS及其他必要依赖，初期使用流畅，但后续出现问题。

问题 #

使用Vite时需执行npm run dev启动监听服务器，但TailwindCSS有独立的watch命令。执行npm run dev时不会触发TailwindCSS的监听，尝试开两个终端同时运行两者，但修改TailwindCSS类后页面样式无变化——尽管TailwindCSS的监听模式显示正在构建。
核心问题：👉 Vite监听模式下TailwindCSS未自动构建

尝试过的无效解决方案 #

试过StackOverflow、ChatGPT及Gemini给出的方法，均未解决：

🚫 双终端运行 #

同时在两个终端分别运行两个进程，各自能正常工作，但修改TailwindCSS样式后页面无变化。

🚫 使用&&拼接命令 #

在package.json中拼接命令：

"scripts": {
  "dev": "vite && tailwind:watch", //👈
  "build": "vite build && tailwind:build",
  "preview": "vite preview",
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
  "tailwind:build": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css"
},

🚫 使用concurrently #

尝试用concurrently修改dev命令：

"scripts": {
  "dev": "concurrently \"npm run vite\" && \"npm run tailwind:watch\"", //👈
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
},

🚫 强制清除Vite缓存 #

给vite命令添加--force参数清除缓存，仍无效：

"scripts": {
  "dev": "concurrently \"npm run vite --force\" && \"npm run tailwind:watch\"", //👈
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
},

临时（低效）解决方案 #

目前唯一可行的方式是修改TailwindCSS类后：

1. 停止Vite服务
2. 执行TailwindCSS构建命令
3. 重新启动Vite 😢

补充：PostCSS集成尝试 #

尝试通过PostCSS集成TailwindCSS，但卡在postcss.config.js配置上。使用以下代码：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

出现错误：

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/Foo/TRYOUTS/myproject): [ReferenceError] module is not defined in ES module scope

修改为以下写法后仍报错：

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [tailwindcss({}), autoprefixer({})],
};

有人建议使用Babel解决，是否可行？

解决方案 #

1. 修复PostCSS配置的ES模块报错 #

Vite默认使用ES模块环境，不能用CommonJS的module.exports，有两种解决方式：

• 方式一：改用ES模块语法
  修改postcss.config.js为：

  export default {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  };
  

• 方式二：保留CommonJS写法，修改文件名
  将postcss.config.js重命名为postcss.config.cjs，继续使用原代码即可。

2. 让Vite自动处理TailwindCSS（无需单独watch） #

• 在src/assets/css/app.css中添加Tailwind核心指令：

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

• 在项目入口文件（如src/main.js）中引入该CSS文件：

  import './assets/css/app.css';
  

3. 简化package.json脚本 #

删除单独的Tailwind命令，Vite会自动负责CSS的构建与热更新：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

4. 验证Tailwind配置 #

确保tailwind.config.js正确配置了内容扫描路径，示例：

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

关于Babel的疑问 #

不需要使用Babel解决该问题，报错根源是PostCSS配置文件的模块语法与项目环境不匹配，按上述两种方式修改即可解决。

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