I'm currently using WordPress and Tailwind CSS, specifically Tailpress, and I'd like to take in all css files from ./resources/css/components and output to ./css/components, running postcss and whatever processing is necessary. The rest of the project is configured to output from ./resources/css to ./css and works fine. I tried adding css/components, css/components/, css/components/* and some other intuitive syntaxes, but to no avail. I've tried googling for quite a while and searching the docs and stackoverflow and can't find anything on outputting an entire directory of files.
I know bundlers like rollup or vite could take in files and output obscurified or semi-random file names and they have often config for keeping the file names the same. Am I looking in the wrong place thinking the tailwindcss CLI could do this? The rest of the project uses the tailwindcss CLI for the individual app.css and editor-style.css input and output, but we do have esbuild for JS only. Here are the scripts in the package.json which is the default Tailpress one with my added (not working) component CSS scripts:
"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\""
},
