Tailwind.config.js in custom ui vue3/vite library not being used by consuming project

Question

I've created a library of vue3 SFCs using vite and postcss. Ahead of publishing to NPM, I've successfully created a symlink between the library and another local project that is intended to consume the library's components. The library has a theme of it's own that I've defined in it's tailwind.config.js, however the components are instead being styled on the equivalent tailwind config file in the consuming project. I want to remove custom theme from the consuming project and rely solely on the library's config file, but I'm struggling to include the file during the library's export. I'm intending on publishing the component library as an npm package.

Here are the files that I've set up for the component library:

package.json

{
  "name": "test-components",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist/test-components.cjs.js",
  "module": "dist/test-components.es.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build && npm run build:styles",
    "build:styles": "postcss src/tailwind.css -o dist/index.css",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "postcss-cli": "^10.1.0",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5",
    "vue": "^3.3.4"
  },
  "peerDependencies": {
    "vue": "^3.3.4"
  }
}

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // Customised theme
  },
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
      vue()
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.js'),
      formats: ['es', 'cjs'],
      fileName: (format) => `test-components.${format}.js`
    },
    rollupOptions: {
      external: [ 'vue', 'moment', 'vue-router'],
      output: {
        exports: 'named'
      }
    }
  }
})

tailwind.css

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

index.js

import * as components from './components/components.js';

const defaultComponents = components?.default;
const testComponents = {
    install(Vue) {
        Object.keys(defaultComponents).forEach(name => {
            Vue.component(name, defaultComponents[name]);
        });
    },
}
export default testComponents

This is my file structure:

I've attempted creating a tailwind plugin for the theme but I can;t seem to get it right for the configuration I'm using. Any help would be appreciated, thanks!