How can i create a Tailwind Plugin from CSS code?

Question

Some time ago to work on my own projects I created Tailwind components, the projects were vanilla so I used Tailwind with its cdn, my mistake is that I wrote the components with the CSS sitaxis, and what I want now is to create a tailwind plugin to create a NPM package, but to create a Tailwind plugin the styles have to be in a JavaScript object.

This is the way I wrote it above:

const stylesString = `
    .flex-center {
        @apply flex justify-center items-center;
    }
`

document.head.innerHTML += `
<style type="text/tailwindcss">
    @layer components {
        ${stylesString}
    }
</style>
`;

And this is the way you should write it to create a plugin:

const stylesObject = {
    '.flex-center': {
        "@apply flex justify-center items-center": {},
    },
}

const tailwindConfig = document.createElement('script');
tailwindConfig.innerHTML = `
const plugin = tailwind.plugin(function lullabyUI({ addComponents }) {
    addComponents(${JSON.stringify(stylesObject)});
})

tailwind.config = {
    plugins: [plugin]
}
`;

document.head.appendChild(tailwindConfig);

The problem is that stylesString has more than 100 components/styles and passing each style written in css syntax to object is very tedious, I'm looking for a way to transcribe code from css to object or create Tailwind components based on @layer components code.

Thanks for reading.