Did you know there’s an easy way to use Tailwind in your Chrome Extension? I love Tailwind CSS, but figuring out how to use it in a Chrome Extension can be tricky. The trick is to use the TailwindCSS CDN package.
Unless you use a framework like WXT or introduce a build step, getting Tailwind to play nicely with your Chrome extension and correctly parsing your styles can be difficult. So how do you use Tailwind in your Chrome extension? The answer is simple — rather than building Tailwind locally, import the CDN version as a local script!
Using a local script is crucial since the v3
extension manifest forbids loading external <script>
resources. Additionally, the nature of Chrome extensions sidesteps the typical CDN script troubles too — since Chrome extensions are pre-packaged, your users don’t have to download additional resources.
Let’s explore using Tailwind CSS in your Chrome extension via the CDN script.
Using the Tailwind CSS CDN script in your Chrome Extension is pretty simple. You need to:
src=
attribute of the <script>
tag).
my-extension/tailwind_v405.js
(replacing 405
with the current version, which is visible in the unpkg.com
URL).tailwind.js
script into the popup.html
file of your extension.
<script src="./tailwindcss_cdn_405.js"></script>
within the <head>
section of your popup.html
file.<head>
of your extension might look something like:<!-- my-extension/popup.html -->
<html>
<head>
<title>Tailwind in a Chrome Extension!</title>
<script src="./tailwindcss_cdn_405.js"></script>
</head>
...
</html>
That’s it! Tailwind CSS will run from the included CDN script, letting you easily use Tailwind in your Chrome Extension without having to mess around with a build step or running Tailwind locally.
As I mentioned before, running Tailwind from the CDN package doesn’t include the drawbacks it usually does for a typical website. Since Chrome Extensions are pre-packaged and downloaded when a user installs them, there’s no performance downside to using the CDN package.
console.warn
about running via the CDN package. This is safe to ignore, but it will always appear under Errors
when you visit chrome://extensions
.To update Tailwind, you must download a new CDN package and replace the current one.
v4.0.1
to v4.0.5
, you’d need to visit the unpkg url and save the new code. I prefer to save it to a new file to track which version I’m running (which means I also update the <script>
tag in popup.html
).I hope you found this article useful!
I love Tailwind, so being able to also use it to style Chrome Extensions is awesome, and this method makes it trivial to get up & running.