Hello, I am little bit confused, so sorry for this issue.

Since this afternoon, my website, which uses your awesome tailwind-jit-cdn broke. I figured out that it was because Tailwind got updated and I also found out that you are planning to merge with Tailwind.

I have question, will this format of CDN "one simple script" without any tailwind files on my FTP be possible in future? Because I run on CMS and I don't really want to run node for Tailwind in my themes folder.

Sorry for taking your time, maybe it was answered elsewhere, otherwise, I am not able to run my script with new update of Tailwind anymore.

When adding the CDN and previewing my page in Safari I am seeing the following error:

SyntaxError: No identifiers allowed directly after numeric literal

This does not happen in Chrome or Firefox which leads me to think does something within the CDN need to be transpired?

Aside from that this is awesome!

c

Hi! Thanks for this amazing script.

I am reading in your site the next:

https://beyondco.de/blog/tailwind-jit-compiler-via-cdn

"Of course all of the processing happens on the client side. No HTML is sent to a server to generate the CSS."

All is correct when the script is loaded from unpkg

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

If I try to download the script to my localhost and work offline like:

<script src="js/tailwindcss-jit-cdn,js"></script>

next error is returned:

"Uncaught ReferenceError: tailwind is not defined at ..."

Why it is happening? You say that its works in the client side. (I need it because in my family holydays sometimes I cant connect to internet)

Thanks!

When I use this tool do I also need to include a Tailwind CSS cdn like
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

When I use the following config I get the expected results. Tailwind, classes containing "-secondary" use the purple palette.

<script type="tailwind-config">
  {
    theme: {
      extend: {
        colors: {
          primary: {
            "50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"
          },
          secondary: colors.purple
        }
      }
    }
  }
</script>

However, if I want to carry out the same extension whilst also using the Typography plugin as demonstrated in the docs, the "colors" object for the existing purple palette is not defined in that scope. e.g. "Uncaught ReferenceError: colors is not defined"

<script type="module" >
import tailwindcssTypography from 'https://cdn.skypack.dev/@tailwindcss/typography';

window.tailwindConfig = {
   plugins: [
     tailwindcssTypography,
   ],
  theme: {
    extend: {
      colors: {
        primary: {
        "50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"
        },
        secondary: colors.purple
      }
    }
  }
};

window.tailwindCSS.refresh();
</script>
<script type="tailwind-config">
window.tailwindConfig
</script>

One solution is to define a new variable containing the original colors from tailwind and reference this, however I wondered if there was a better way I hadn't thought of? Since the colors object is already available within the tailwind-config type script?

Thanks for all the work on this tool!

This is a fantastic package and I'm really eager to use it!

One thing holds me back, and that's the fact that I've used @apply in external stylesheets. Do you think this is something that you can add to the library?

Thanks!

Hi Marcel et al,
I tried using @apply within a css file and it had no effect. Is @apply catered for?
https://codepen.io/jayenne/pen/BaWryVG

I was specifically hoping to use it within codepen to really help my pen:
https://codepen.io/jayenne/pen/GRWxgqO to display like my play.tailwindcss: https://play.tailwindcss.com/8gfgRpSQuw?file=config

From today, a project that was working well yesterday, is giving me this error

"The transform class does not exist. If transform is a custom class, make sure it is defined within a @layer"