JSFiddle - React, Tailwind, and code Playground

by oilvier

SCSS

$colors: (
  hermine     : #FFFFFF,
  wildsand    : #F5F5F5,
  mercury     : #E2E2E2,
  dusty       : #979797,
  dove        : #6E6D6D,
  tundora     : #4A4A4A,
  mineshaft   : #232323,
  codgray     : #1A1A1A,
  charcoal    : #000000,
  flush       : #CA4040,
  bittersweet : #FF6961,
  froly       : #F07882,
  londonhue   : #B59EBD,
  tropic      : #bedff4,
  cerulean    : #0092D4,
  mantis      : #7dc150,
  oxley       : #7A9E8C,
  saffron     : #F5C73D,
) !default;
/* stylelint-enable */

// Function to easily get color names
// Avoid linter to break on this which it considers unknown...
/* stylelint-disable at-rule-no-unknown */
@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}

div {
	width: 1em;
	height: 1em;
	font-size: 20px;
	background-color: red;
	filter: drop-shadow(30px 10px 4px rgba(#{color(cerulean)}, .4));
}