JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true,
useNativeCSSProperties: true
};</script>
<base href="https://polygit.org/polymer+:v1.6.1/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">

<style is="custom-style">
  #nonexistent {
    --my-mixin: {
      background: red;
    }
  }
  x-foo {
    --my-mixin: {
      background-color: green;
    };
  }
</style>

<dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: block;
        @apply(--my-mixin);
      }
    </style>
    <div>Green background?</div>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'x-foo'
});