How to include Tailwind CSS styles from React component library into the app CSS bundle?

G’day,

I am building a React component library with TailwindCSS and ViteJS. The library outputs each component as a separate JS file, for example:

// @components-library/src/ComponentA.jsx

export default function ComponentA() {
  return <div className="flex justify-center">Component A</div>;
}

// Bundle Output: @components-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
  return /* @__PURE__ */ jsx("div", {
    className: "flex justify-center",
    children: "Component A",
  });
}
export { ComponentA as default };

The app that is consuming this components library is also using Tailwind. However, the styles are not applied to the imported component. App-specific styles are working fine.

/* app/src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

// app/src/App.jsx

import CompoenntA from "@component-library/ComponentA";
export default function App() {
  return (
    <div className="p-10">
      <ComponentA />
    </div>
  );
}

Awaiting expert advice.

Thank you!