Did you know, there is an easy way to use Tailwind CSS in your Chrome Extension.
I use Tailwind CSS extensively, and it’s a great choice for styling a Chrome Extension. I’ve used it to build plenty of extensions, like Tailcolors, but adding it to a Chrome Extension can seem impossible.
There’s a trick though — just use the TailwindCSS CDN package.
Getting Tailwind CSS to play nicely with a Chrome Extension is tricky since, unless you use a framework like like WXT with a build step, your extension is typically just static assets. There’s no underlying system or server for Tailwind to plug into. Using the CDN script locally sidesteps these issues!
By using the Tailwind CDN package, you avoid any build-related hassle (the package handles it all). Additionally, importing it as a local script is crucial since the v3
extension manifest forbids loading external <script>
resources.
Let’s dive into 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
.v4.0.1
to v4.0.5
, you’d need to visit the tailwindcss 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 CSS, so being able to style Chrome Extensions with it is awesome, and this method makes it trivial to get up & running.