import tailwind in popup html

[Benbinbin]

Thanks to create this plugin.
I try to follow the tutorial Create a Chrome Extension with Vite + Vue by
Alvaro Dev Labs to build a Chrome extension with Vite+Vue+Tailwind.

But I have a problem, it seems that if I build a pupup page for Action (not the popup for content-script as the video tutorial), the tailwindcss don't work correctly, the css file can generate when build, but it can't link to the HTML correctly, maybe the difference between my situation and the video tutorial is the entry point, the content-script entry point is js file, and the popup page entry point is a html file in manifest.json.

the reproduce repo: https://github.com/Benbinbin/extension-vite-vue-demo

[boka18]

Hey @Benbinbin, I have the exact same issue. Were you able to resolve it somehow?

[Benbinbin]

@boka18 sorry, I can't find a solution by using this plugin. Now I change the plugin to this one and it works fine. The developer also provides a template to build extension with vite+vue+manifestV3.

[boka18]

got it @Benbinbin! thank you!

I was also able to create starter template for react (with this plugin)

You can check out the boilerplate here:
https://github.com/boka18/vite-react-chrome-extension-example

It's forked from here:
https://github.com/alvarosaburido/vite-vue-chrome-extension-example
In the above repo, it was built for vue. I managed to port that to react

[tyanbiao]

same issue

[reducm]

found the docs said The entries of options and popup pages are HTML files, their outputs are same as nomarl page. link

its not a good solution that can import css as string, an then add to the document

such as I used the element-plus, in your main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import cssString from 'element-plus/dist/index.css'


const style = document.createElement('style');
document.head.append(style);
style.textContent = cssString;

createApp(App).use(ElementPlus).mount('#app')

[ciricc]

I have the same problem with windicss import 'virtual:windi.css' in Svelte application popup. Css generates, but not link into HTML correctly

[ciricc]

@reducm Thank you, that's worked for me

[evanb2]

@reducm I'm not using ElementPlus, but after adding the other parts of your solution I'm still not getting Tailwind imported. When I inspect the popup DOM I don't see the <style> element. Is ElementPlus adding some functionality for this to work for you?

[reducm]

@reducm I'm not using ElementPlus, but after adding the other parts of your solution I'm still not getting Tailwind imported. When I inspect the popup DOM I don't see the <style> element. Is ElementPlus adding some functionality for this to work for you?

to my knowledge, the elementPlus css is just some css string, and I found it did add en style tag to the document head

i think maybe some js code overwrite it, you code just use this code(remove other import) to see is there a style tag in head

import cssString from 'someCss'


const style = document.createElement('style');
document.head.append(style);
style.textContent = cssString;