JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="accent-pink">
  <abbr title="wtf">SVG Background url</abbr>
</div>

SCSS

$body-color: #393e44;

$accent-colors: ( 
  "green": #96d63d,
  "blue": #5e80f6,
  "teal": #2fb8cd,
  "pink": #ff6e9e,
  "purple": #ca63e5,
  "orange": #fd923a,
  "red": #e73e50
);

@mixin accent-colors {
  @each $key,
  $value in $accent-colors {
    $accent-name: $key !global;
    $accent-color: $value !global;
    .accent-#{$key} & {
      @content
    }
  }
}

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative;
  border: none;
  
  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$body-color}" /></svg>');
      repeat: repeat;
    }
    
    @include accent-colors {
      
      background: {
        image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$accent-color}" /></svg>') !important;
      }
      
    }
    
  }
}