4

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:

Enter image description here

Is there a way to add external libraries that don't end with .css or .js?

2
  • The extension is used to determine whether to insert a script or style tag, you could probably append #.js of #.css if you really wanted to use that input.
    – Cerbrus
    Dec 19, 2022 at 8:40
  • I see, wasn't obvious for me. Thanks for the explanation.
    – andreas
    Dec 19, 2022 at 11:03

2 Answers 2

8

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:

Enter image description here

That way, any library can be added. But it wasn't clear for me at first sight that this was possible.

3
  • Yes, it's not clear to me, why the Add an external library button only allows for .js and .css URLs, when you can literally paste every URL with the script tag in the HTML section itself.
    – andreas
    Dec 19, 2022 at 8:39
  • The extension is used to determine whether to insert a script or style tag, you could probably append #.js of #.css if you really wanted to use that input, @andreas.
    – Cerbrus
    Dec 19, 2022 at 8:43
  • 3
    I'd consider this a slight bug. While unusual, it's not unheard of for external resources to have a file extension in the path that doesn't match the MIME type of what's being served. Better for the snippet interface to display a warning ("Are you sure this is what you want? It may not work") than to forbid it entirely. Dec 19, 2022 at 17:32
1

Here's a working Tailwind snippet:

.as-console-wrapper{display:none!important}
<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        clifford: "#da373d",
      },
    },
  },
}
</script>

<h1 class="text-3xl font-bold underline text-clifford">
  Hello world!
</h1>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .