I injected Tailwind CSS using the code below according to the documentation.
import $ from "jquery";
import '@/assets/main.css'
export default defineContentScript({
matches: ["*://*/*"],
cssInjectionMode: "ui",
runAt: "document_start",
async main(ctx){
if (window.location.href.includes("youtube.com")) {
$(document).on('yt-update-title', async () => {
const container = $("#above-the-fold")
if (container.length === 0) {
return
}
container.prepend('<div id="youtube-dubbing-notifiy-panel" class="style-scope ytd-watch-metadata"></div>')
const notifyPanel = $("#youtube-dubbing-notifiy-panel")
const ui = await createShadowRootUi(ctx, {
name: 'youtube-dubbing-ui',
anchor: notifyPanel[0],
append: 'last',
position: 'inline',
// zIndex: Number.MAX_VALUE,
onMount(container) {
$(container).prepend(
`
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-base font-semibold leading-6 text-gray-900">Manage subscription</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.</p>
</div>
</div>
</div>
`
)
}
,
})
ui.mount()
})
}
}
})
main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
I found that it seems only the base CSS has been injected, and things like bg-white are not taking effect. Could you please tell me if I did something wrong?
I injected Tailwind CSS using the code below according to the documentation.
main.css
I found that it seems only the base CSS has been injected, and things like bg-white are not taking effect. Could you please tell me if I did something wrong?