如何使用Tailwind CSS CLI(和postpass)输入和输出具有相同文件名的整个文件夹

Question

我目前正在使用WordPress和Tailwind CSS，特别是Tailpress，我想从./resources/css/components接收所有css文件并输出到./css/components，运行postss和任何必要的处理。项目的其余部分被配置为从./resources/css输出到./css，并且运行良好。我尝试添加css/components、css/components/、css/components/*和其他一些直观的语法，但都无济于事。我在谷歌上搜索了很长一段时间，搜索了文档和stackoverflow，但在输出整个文件目录时找不到任何内容。

我知道像rollup或vite这样的捆绑器可以接收文件并输出模糊或半随机的文件名，而且他们通常会配置文件名以保持不变。我是不是找错地方了，以为tailwindcss CLI可以做到这一点？该项目的其余部分将tailwindcss CLI用于单独的app.css和editor-style.css输入和输出，但我们只有用于JS的esbuild。以下是package.json中的脚本，它是默认的Tailpress脚本，带有我添加的(不工作的(组件CSS脚本：

"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""
},

Answer 1

所以Tailwindcss CLI文档非常糟糕。。。但我发现我可以用postcss-cli实现这一点

npm install postcss-cli

"components": "postcss resources/css/components/ --dir css/components/",

当然，可以将脚本重命名为所需的任何内容，并更改源目录和目标目录。