如何用Tailwind CSS CLI+PostCSS批量处理CSS文件夹并保留文件名

背景 #

我基于Tailpress框架开发WordPress项目，用Tailwind CSS构建样式。现在需要将./resources/css/components下的所有CSS文件，经过PostCSS处理后输出到./css/components目录，且保留每个文件的原名称。

项目中处理单个文件（比如app.css、editor-style.css）的配置都正常，但尝试了css/components、css/components/、css/components/*等路径语法，都无法实现批量处理目录文件的需求。我查了谷歌、Tailwind官方文档和StackOverflow，没找到相关的实现方法。

目前项目用Tailwind CSS CLI处理单个CSS文件，JS部分用esbuild。以下是我在package.json中添加的无效脚本：

"scripts": {
    "production:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --minify",
    "production:css-components": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/components -o ./css/components --postcss --minify",
    "production:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --minify",
    "production:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --minify",
    "dev:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss",
    "dev:css-components": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/components -o ./css/components --postcss",
    "dev:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss",
    "dev:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js",
    "watch:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --watch",
    "watch:css-components": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/components -o ./css/components --postcss --watch",
    "watch:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --watch",
    "watch:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --watch",
    "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-components\" \"npm run production:css-editor\" \"npm run production:js\"",
    "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-components\" \"npm run dev:css-editor\" \"npm run dev:js\"",
    "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-components\" \"npm run watch:css-editor\" \"npm run watch:js\"",
    "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"trulioo-twenty-two.test\" --host=\"trulioo-twenty-two.test\" --no-inject-changes --files=\"./\"",
    "watch-sync": "cross-env NODE_ENV=development concurrently \"npm run browser-sync\" \"npm run watch\""
  }

疑问 #

Tailwind CSS CLI本身不支持批量处理目录下的多个文件并保留原文件名吗？还是我没找对配置方式？

Tailwind CSS CLI本身不支持直接批量处理目录下的多个输入文件，它的-i/--input参数只接受单个文件路径，需要配合shell命令或PostCSS CLI来实现批量处理。下面给你两种可行的实现方式：

方式1：用Shell循环批量处理（无需额外依赖） #

直接修改package.json中的脚本，用shell命令遍历目标目录下的所有CSS文件，逐个调用Tailwind CLI处理：

生产环境脚本 #

"production:css-components": "cross-env NODE_ENV=production mkdir -p ./css/components && for file in ./resources/css/components/*.css; do tailwindcss -i \"$file\" -o \"./css/components/$(basename \"$file\")\" --postcss --minify; done"

开发环境脚本 #

"dev:css-components": "cross-env NODE_ENV=development mkdir -p ./css/components && for file in ./resources/css/components/*.css; do tailwindcss -i \"$file\" -o \"./css/components/$(basename \"$file\")\" --postcss; done"

监听模式脚本 #

Tailwind CLI的--watch只能针对单个文件，所以需要用chokidar-cli监听目录变化触发重构：

1. 安装依赖：npm install chokidar-cli --save-dev
2. 修改监听脚本：

"watch:css-components": "cross-env NODE_ENV=development chokidar \"./resources/css/components/*.css\" -c \"npm run dev:css-components\""

方式2：改用PostCSS CLI批量处理 #

如果觉得shell循环不够优雅，可以通过PostCSS配置文件结合CLI实现：

1. 确保项目根目录有postcss.config.js，配置如下：

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    tailwindcss('./tailwind.config.js'),
    autoprefixer(),
    process.env.NODE_ENV === 'production' ? cssnano() : null
  ].filter(Boolean)
};

2. 安装postcss-cli：npm install postcss-cli --save-dev
3. 修改package.json脚本：

"production:css-components": "cross-env NODE_ENV=production postcss ./resources/css/components/*.css --dir ./css/components --minify",
"dev:css-components": "cross-env NODE_ENV=development postcss ./resources/css/components/*.css --dir ./css/components",
"watch:css-components": "cross-env NODE_ENV=development postcss ./resources/css/components/*.css --dir ./css/components --watch"

这种方式利用PostCSS CLI的--dir参数，自动将处理后的文件输出到指定目录并保留原文件名，同时兼容Tailwind的处理逻辑。

注意事项 #

• 脚本中的mkdir -p ./css/components用于自动创建目标目录，避免因目录不存在报错。
• 如果组件目录有子目录，将通配符改为./resources/css/components/**/*.css即可支持递归匹配。

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