JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="strokeme">
    This text should have a stroke in some browsers
    測試，好棒喔，快逃快逃，集合！ ^_^ &lt;3 QQ XD
</div>

SCSS

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
  font-family: 'Noto Sans TC';
}

.strokeme
{
    font-size: 50px;
    font-weight: bold;
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    
    $stroke-color: #000;
    $text-blur: 0px;
  text-shadow: -2px -2px $text-blur $stroke-color, 2px -2px $text-blur $stroke-color, -2px 2px $text-blur $stroke-color, 2px 2px $text-blur $stroke-color;
  $text-blur: 1px;
  text-shadow: -2px -2px $text-blur $stroke-color, 2px -2px $text-blur $stroke-color, -2px 2px $text-blur $stroke-color, 2px 2px $text-blur $stroke-color;
  $text-blur: 2px;
  text-shadow: -2px -2px $text-blur $stroke-color, 2px -2px $text-blur $stroke-color, -2px 2px $text-blur $stroke-color, 2px 2px $text-blur $stroke-color;
   $value:'' ;
  @for $i from -2 through 2 {
    @for $j from -2 through 2 {
      $value: '#{$value},#{$i}px #{$j}px #{$text-blur} #{$stroke-color}';
    }
  }
  $value: unquote($value);
  text-shadow: str-slice($value, 2, str-length($value)); 
}