The recommended way of directly including Tailwind CSS according to their documentation is to add
<script src="https://cdn.tailwindcss.com"></script>
to the HTML head. But when I open a stack snippet and try to insert this URL https://cdn.tailwindcss.com as external library, it says:
Is there a way to add external libraries that don't end with .css or .js?
I found that it's possible to skip using the Add an external library button and directly insert the script tag in the HTML section:
That way, any library can be added. But it wasn't clear for me at first sight that this was possible.
.js and .css URLs, when you can literally paste every URL with the script tag in the HTML section itself.
script or style tag, you could probably append #.js of #.css if you really wanted to use that input, @andreas.
Here's a working Tailwind snippet:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--padding-test: 2rem;
}
</style>
<div class="p-test bg-sky-300">Hello World</div>You can also pin a specific version of a production build:
.as-console-wrapper{display:none!important}<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: "#da373d",
},
},
},
}
</script>
<style type="text/tailwindcss">
.my-class {
@apply text-3xl font-bold underline;
}
</style>
<h1 class="my-class text-clifford text-center">
Hello world!
</h1>See Tailwind's Play CDN page for more information.
scriptorstyletag, you could probably append#.jsof#.cssif you really wanted to use that input.