JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div></div>

SASS

// Avoid linter to break on those hexadecimal color values (which are allowed only here)
/* stylelint-disable color-no-hex */
$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;
}
$foo: color(charcoal);
div {
	height: 20px;
	width: 20px;
	background: red;
	filter: drop-shadow(0 2px 12px 0 rgba($foo, .12));
}