Play CDN - Support custom external CSS

[sntran]

In an effort of reducing the effort moving from development with Play CDN to production, it would be nice to be able to link to external CSS file instead of inline. For example,

instead of:

<style type="text/tailwindcss">
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
  }
</style>

It would be more flexible with this:

<link href="/css/app.css" rel="stylesheet" type="text/tailwindcss" />

Or at least:

<style type="text/tailwindcss">
  @import "/css/app.css";
</style>

At the time to switch, we just point Tailwind CLI to that CSS file.

[sntran]

Just want to note a workaround I resorted to using. Instead of adding custom CSS in a <style> element, I wrote a plugin to fetch the external CSS file and add to Tailwind layers in my tailwind.config.js file:

tailwind.config = {
  plugins: [
    // Loads site's CSS into Tailwind to avoid having inline <style>.
    plugin.withOptions(function siteCSS(options) {
      const {
        css = "",
      } = options;

      return async function({ addBase, addComponents, addUtilities, addUserCss, theme, postcss }) {
        const root = postcss.parse(await css);

        root.walkAtRules("layer", rule => {
          const { params, nodes } = rule;

          if (params === "base") {
            addBase(nodes);
            rule.remove();
          }
          if (params === "components") {
            addComponents(nodes);
            rule.remove();
          }
          if (params === "utilities") {
            addUtilities(nodes);
            rule.remove();
          }
        });

        // At this point it is safe to include all the left-over css from the
        // user's css file. This is because the `@tailwind` and `@layer` directives
        // will already be handled and will be removed from the css tree.
        root.walkRules(rule => {
          addUserCss(rule);
        });
      };
    })({
      css: fetch("/css/app.css").then(response => response.text()),
    }),
  ],
}

It mostly works (except the ones added by addUserCss which does not seem to add anything in). I can also include Tailwind's @import rules in my CSS file to ensure it will work with Tailwind CLI:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
 ...
}

However, it'd be better if the Play CDN script handles it directly. I mean, it's probably doing something similar on the content of the <style> element, and just need to be extended to fetch from external link.

[sntran]

@Joolyan from what I traced it down, it was because fetch is an async operation, but Tailwind does not await for async plugins. I reported it in #7277.

[Joolyan]

Thanks for the explanation.

Unfortunately the requirement to use an inline style tag for custom CSS, seems to be by design and not something which will 'fixed' in the short term. Possibly to keep Tailwind CDN away from production applications.

I'm not a developer and use a live browser preview to help me. This workflow worked well before Tailwind moved to a JIT compiler, but now requires the use of the Tailwind CDN. However, once the site content layout is complete, I then use a local build process, which doesn't use the Tailwind CDN.

Thanks again for the code to use an external tailwind.config.js file.

[murugappanrm]

Hi @Joolyan

I read the posts above. I think there may be a misunderstanding in the usage of CDN versions. This mistake has been committed by people who created Vuejs, Quasar etc. What is the mistake? Well, the are many who use php frameworks like Codeigniter 4(yay) and Laravel (yulks). These people have been using the time tested Bootstrap framework and are very eager to move on to Tailwind. For such developers they cannot use the CLI version with the CI4 framwork as it is a php platform. The solution is to use Tailwind CDN. So to kill tailwind CDN is a huge mistake by Tailwind Labs.

[adamwathan]

@murugappanrm You can definitely use Tailwind with Codeigniter, your CSS framework does not need to be written in the same language as your web framework. We even offer a standalone CLI tool that doesn’t even require any dependencies are installed on your computer at all, you just run it like any other program on your computer to compile your CSS:

https://tailwindcss.com/blog/standalone-cli

[murugappanrm]

Hi @adamwathan

Thank you so much for the update and help. The Standalone CLI works great and fantastic. I have the following questions/feedback:

(1) Will there be a version included in each release (I am using the Windows version)?
(2) I could not find anything mentioned on the Standalone CLI in the documentation - both in Sidebar menu or the search.
(3) I configured and tested the version for Windows 10 using VS Code and create an example as well. Anyway i could document this within the Tailwindcss docs? I would like to contribute back.

[murugappanrm]

@adamwathan

Initially Standalone CLI seem to work, i was rejoicing. The sadly the version 3.1.6 seems to be broken. I have posted the full details under discussion: #8852

I may be doing something wrong but the documentation was not very helpful for me to debug it. I really want to use the Standalone CLI which is great innovative solution. Appreciate any help.

[PwrSrg]

@sntran

This seemingly basic functionality is greatly needed, and as you pointed out, would be a HUGE improvement over the current tedious task of moving from CDN development to production! I too spent quite some time testing the <link href="tw.cdn.main.css" type="text/tailwindcss"> approach, only to come to the same disappointing conclusion as you.

Fingers crossed this gets implemented SOON. 🤞

In the meantime, I have been unable to get your (above) posted workaround code working. Does it still work for you? If so, am I missing something from a separate post? I can see the css file being successfully loaded in DevTools, but it still doesn't get applied. 😔

Thanks!

[sntran]

Most likely due to #7147 (reply in thread)

[PwrSrg]

So you are saying that your plugin no longer works for you either?

[sntran]

I used the good old XHR to make sync request instead: #7277 (reply in thread)

Not great, but it doesn't look like Tailwind will support async plugin anytime soon anyway.