JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css">
  <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

    <ion-header translucent>
      <ion-toolbar>
        <ion-title>This should be red</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content" fullscreen>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Test</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          testing shadow-dom-inject-styles
        </ion-card-content>
      </ion-card>

    </ion-content>
    
  </ion-app>
</body>

<script type="module">
  import {injectStyles} from 'https://unpkg.com/shadow-dom-inject-styles@latest/dist/index.js';

  setTimeout(() => {

    const toolbar = document.querySelector('ion-app > ion-header > ion-toolbar');

    // language=CSS
    const styles = `
        .toolbar-background {
            background: red !important;
        }
        .toolbar-container {
            color: #fff !important;
        }
    `;

    injectStyles(toolbar, '.toolbar-background', styles);

  }, 200);
</script>

</html>