Closed caleb654 closed 1 year ago
Hi @caleb654, thank you for reaching out. This starter uses vite and @crxjs/vite-plugin under the hood for development. I can confirm that sometimes it fails to detect changes and process some files. I hope that it will be fixed in vite 3 and @crxjs/vite-plugin new release. You can track it here @crxjs/vite-plugin. As a silly workaround you can add ?inline
like import styles from './Counter.module.css?inline'
, save then delete ?inline
. Finally, do fully refresh the page and it will continue to work normally.
I wouldn't recommend using Tailwind CSS for injecting content into the page because of possible class, variable conflicts also it will inject other pages (popup, options etc... but unused in content) classes. You can try https://github.com/robbevp/postcss-multiple-tailwind but I didn't try it.
You can use @apply
in the CSS module. You may be even needed Shadow DOM for encapsulation. https://alirezavalizade.medium.com/use-shadow-dom-for-encapsulation-css-in-google-extensions-19f0aef542c7
@caleb654 Ok, After reading https://tailwindcss.com/blog/tailwindcss-v3-2 release, you can use Tailwind CSS for content with Shadow DOM. This release adds official support for multiple configs in the same project so it won't add unnecessary CSS to the page. I will add better content example after @crxjs/vite-plugin v2.x stable release.
@caleb654 Ok, After reading https://tailwindcss.com/blog/tailwindcss-v3-2 release, you can use Tailwind CSS for content with Shadow DOM. This release adds official support for multiple configs in the same project so it won't add unnecessary CSS to the page. I will add better content example after @crxjs/vite-plugin v2.x stable release.
Any chance you could put together this with @crxjs/vite-plugin@beta
in a branch and perhaps merge when it is stable release? Tailwind CSS in content script would be a huge add.
I might be missing something, but I was running with yarn dev and everything works with hot reloading except the CSS modules in the content folder. When I change the CSS nothing changes, even when I hard reload the page and extension. Any ideas on this?
Also is it possible to use Tailwind when injecting content into the page?