Tailwind classes used by my vue component within my npm pacakge not available when package is imported

I have the below Vue Component:

// src/components/CodeBlock.vue
<script setup>
    import { ref } from 'vue';

    const props = defineProps({
        value: String
    })

    const text = ref(null)
    const copied = ref(false)

    const copyText = (data) => {
        navigator.clipboard.writeText(data);
        copied.value = true;
        setTimeout(() => copied.value = false, 1000)
    }
</script>
<template>

<div class="w-full">
    <div class="relative">
        <label for="npm-install-copy-button" class="sr-only">Label</label>
        <code ref="text" class="col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled readonly>
            <slot>{{ props.value }}</slot>
        </code>
        <button type="button" @click.prevent="copyText(text.innerText)" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 bottom-1 translate-y-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-1 mb-1 inline-flex items-center justify-center hover:text-gray-900 dark:hover:text-white">
            <span id="default-icon" v-if="!copied">
                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                    <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                </svg>
            </span>
            <span id="success-icon" class="inline-flex items-center" v-if="copied">
                <svg class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </span>
        </button>
        <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
            <span id="default-tooltip-message">Copy to clipboard</span>
            <span id="success-tooltip-message" class="hidden">Copied!</span>
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </div>
</div>
</template>

My npm package's package.json looks liket this:

{
    "name": "@pioneer-dynamics/code-block",
    "description": "A simple way to disaply a block of code that has a click to copy option.",
    "version": "1.0.0",
    "author": "Mathew Paret <mathewparet@gmail.com>",
    "license": "MIT",
    "main": "src/components/CodeBlock.vue",
    "dependencies": {
      "vue": "^3.0.0"
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
  }

When I use this component without the npm module (that is copy the .vue file to my consuming project's folder [ not within node_modules ], the UI is rendered as expected).

import CodeBlock from '@/Components/CodeBlock.vue';

When I use the component from the NPM module, the UI looks crap.

import CodeBlock from '@pioneer-dynamics/code-block

How do I fix the UI!?

Created a vue component that I would use in multiple projects, moved it to an NPM pacakge and tried to import it in the consuming project.

Expected UI and function to work the same.

The UI doesn't seem to work as expected, the functionality works as expected.

It sounds like you haven't added the package's code to your Tailwind configuration. Consider adding the following path to the content array in the Tailwind configuration:

module.exports = {
  content: [
    …
    'node_modules/@pioneer-dynamics/code-block/src/components/CodeBlue.vue',