JSFiddle - React, Tailwind, and code Playground

CSS

body {
  background-image: url(https://via.placeholder.com/600);
  width: 100vw;
  height: 100vh;
}

JavaScript

function waitforCSSisApplied() {
  if (!document.body) {
    return new Promise((res, rej) => {
      window.addEventListener('DOMContentLoaded', e => {
        waitforCSSisApplied().then(res);
      });
    });
  }
  const waiter = document.createElement('style');
  waiter.innerHTML = 'body{opacity:.99;}';
  return new Promise((res, rej) => {
    // will trigger only when all styles are applied
    function done(evt) {
      // some cleanup
      waiter.parentNode && waiter.parentNode.removeChild(waiter);
      trigger.parentNode && trigger.parentNode.removeChild(trigger);
      res();       // resolve the promise
    }
    function trigger(){
	  const trigger = document.createElement('style');
	  trigger.innerHTML = 'body{opacity:1;  transition: opacity 0.1s linear;}';
      document.body.offsetWidth; // trigger a reflow
      document.head.appendChild(trigger);
	  }
    document.head.appendChild(waiter);
    document.body.addEventListener('transitionend', done, {
      once: true
    })

    if(document.readyState !== 'complete'){
	    // append it only when all resources are fetched
    	window.addEventListener('load', trigger);
    }
    else{
	    // wait for the end of current js thread
    	setTimeout(trigger, 0);
    }
  });
}

waitforCSSisApplied().then(() => alert('done'))