CSS file is not generated when using vue build and tailwindcss - vuejs3

Question

I am building a component library using Vue and TailwindCSS. When I pulled in the dependancy and loaded in the components to my application I noticed non of the styles were present.
I went back to the build and could see that the common, umd and umd.min files were generated but the css file was not.
If I add something like
<style>
.foo {}
</style>
To one of my component vue files and run the build command I can see the /dist/libname.css file is generated with .foo{} inside.
Is there anything I need to do to get the purged css to be included in the build?

Answer 1

I couldn't actually find an answer so I came up with a solution that might be well overcomplicating it.
I have the following scripts in my package.json file;
"build": "npm run build-vue && npm run tailwind && node uibuild",
"build-vue": "vue-cli-service build --target lib --name mypackagename ./src/index.js",
"tailwind": "NODE_ENV=production tailwindcss build -o ./dist/mypackagename-base.css"
And a javascript file;
const fs = require("fs");
const version = require('./package.json').version;
const packageName = 'mypackagename';
fs.readFile("./dist/" + packageName + "-base.css", (err, buff) => {
let contents = "/** \n" +
"* Some Intro Title \n" +
"* Version: v" + version + "\n" +
"* Author: John Doe \n" +
"*/\n\n";
if (err) {
console.error(err);
return;
}
contents += buff.toString() + "\n";
fs.readFile("./dist/" + packageName + ".css", (err, buff) => {
if (! err) contents += buff.toString();
fs.writeFile("./dist/" + packageName + ".prod.css", contents, err => {
if (err) console.error(err);
if (fs.existsSync("./dist/" + packageName + "-base.css")) fs.unlinkSync("./dist/" + packageName + "-base.css");
if (fs.existsSync("./dist/" + packageName + ".css")) fs.unlinkSync("./dist/" + packageName + ".css");
});
});
});
and then simply run npm run build