如何用JavaScript修改Tailwind配置文件的content数组并保存

直接用Node.js的文件系统模块结合正则匹配就能实现这个需求，以下是可直接运行的脚本：

const fs = require('fs').promises;
const path = require('path');

async function addToTailwindContent(configPath, newPaths) {
  // 读取配置文件内容
  const fileContent = await fs.readFile(configPath, 'utf8');
  
  // 匹配content数组的结构，捕获数组内部内容
  const contentArrayRegex = /content: \[([\s\S]*?)\],/;
  const matchResult = fileContent.match(contentArrayRegex);
  
  if (!matchResult) {
    throw new Error('配置文件中未找到content数组');
  }
  
  // 处理现有数组元素，清理空白并过滤空项
  const existingItems = matchResult[1]
    .split(',')
    .map(item => item.trim())
    .filter(item => item.length > 0);
  
  // 合并新路径，自动去重并添加引号包裹
  const formattedNewPaths = newPaths.map(path => `"${path}"`);
  const allUniqueItems = [...new Set([...existingItems, ...formattedNewPaths])];
  
  // 重新构建符合原格式的content数组字符串
  const newContentBlock = allUniqueItems.join(',\n    ');
  const updatedFileContent = fileContent.replace(
    contentArrayRegex,
    `content: [\n    ${newContentBlock},\n    ],`
  );
  
  // 写入修改后的内容到文件
  await fs.writeFile(configPath, updatedFileContent, 'utf8');
  console.log('Tailwind配置文件已成功更新');
}

// 调用示例：传入配置文件路径和要添加的新路径数组
addToTailwindContent('./file.js', ['./src/**/*.vue', './src/pages/**/*.js'])
  .catch(error => console.error('更新失败:', error));

脚本说明 #

1. 异步读写：使用fs.promises实现异步文件操作，避免回调嵌套
2. 正则匹配：精准定位content数组的位置，兼容原文件的换行和缩进格式
3. 自动去重：通过Set避免重复添加相同的路径
4. 格式保持：重构数组时保留原文件的缩进风格，确保配置文件可读性

注意事项 #

• 若你的配置文件中content数组的缩进或换行格式不同，可调整脚本中字符串拼接的缩进数量（比如把\n 改成对应缩进）
• 运行前建议备份file.js，防止意外修改导致配置出错
• 传入的新路径无需手动加引号，脚本会自动处理

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