how to properly bundle and import css with rollup react - Global CSS cannot be imported from within node_modules

I have a react app (next.js) and a react component library.

In my library, I have a couple css module imports from 3rd party libraries (i.e. tailwind and fontsource) which are causing issues in my next.js app when I import my lib.

error - ./node_modules/tailwindcss/tailwind.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm

output-filename.cjs.development.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
require('tailwindcss/tailwind.css'); // << next.js complains
require('@fontsource/titillium-web/index.css'); // << next.js complains
...

Is there a way to configure rollup to build these as local css files i can include in the build, and if so, how do I import them in the react library code? I have tried adding extract: true to postcss config but it doesn't seem to generate everything properly (all the styles are missing in the .css file) and I'm not sure how to import them.

rollup config (via tsdx.config.js)

const postcss = require('rollup-plugin-postcss')
module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js'
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top'
        },
        extract: true
      })
    )
    return config
  }
}