JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <h1 class="heading-outlined">Some Text</h1>
</div>

SCSS

// 
// Handy Mixin
// 
@mixin text-stroke($fill-color, $stroke-color, $stroke-width) {
  color: $fill-color;
  text-shadow: -$stroke-width -$stroke-width 0 $stroke-color,
                $stroke-width -$stroke-width 0 $stroke-color,
               -$stroke-width  $stroke-width 0 $stroke-color,
                $stroke-width  $stroke-width 0 $stroke-color;

  @supports ((-webkit-text-stroke-color: $stroke-color) and (-webkit-text-fill-color: white))
            or ((-moz-text-stroke-color: $stroke-color) and (-moz-text-fill-color: white)) {
                        color: unset;
                  text-shadow: unset;
         -moz-text-fill-color: $fill-color;
      -webkit-text-fill-color: $fill-color;
       -moz-text-stroke-color: $stroke-color;
    -webkit-text-stroke-color: $stroke-color;
       -moz-text-stroke-width: $stroke-width;
    -webkit-text-stroke-width: $stroke-width;
  }
}

//
// Demo Styles
//

.page {
  position: relative;
  min-width: 640px;
  min-height: 480px;
  background-image: url('https://placeimg.com/640/480/people');
  background-repeat: no-repeat;
  background-size: cover;
}

.heading-outlined {
  @include text-stroke(rgba(#000,.5), #fff, 1px);  

  position: absolute;
  right: 0;
  bottom: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 80px;
  text-transform: uppercase;
}