loadResourceWithFallback.js

function loadResource(type, sources) {
  let index = 0;

  function tryLoad() {
    if (index >= sources.length) {
      console.error(`${type.toUpperCase()} load failed.`);
      return;
    }

    let el = type === 'js' ? document.createElement('script') : document.createElement('link');

    if (type === 'js') {
      el.src = sources[index];
      el.onload = () => console.log(`Loaded: ${sources[index]}`);
      el.onerror = () => {
        console.warn(`Failed: ${sources[index]}`);
        index++;
        tryLoad();
      };
    } else if (type === 'css') {
      el.rel = 'stylesheet';
      el.href = sources[index];
      el.onload = () => console.log(`Loaded: ${sources[index]}`);
      el.onerror = () => {
        console.warn(`Failed: ${sources[index]}`);
        index++;
        tryLoad();
      };
    } else {
      console.error('Invalid type');
      return;
    }

    document.head.appendChild(el);
  }

  tryLoad();
}

// Usage examples
loadResource('js', [
  'local-tailwind.js',
  'https://cdn.jsdelivr.net/npm/[email protected]/tailwindcss.js',
  'https://unpkg.com/[email protected]/dist/tailwindcss.js'
]);

loadResource('css', [
  'local-tailwind.css',
  'https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css',
  'https://unpkg.com/[email protected]/dist/tailwind.min.css'
]);