unable to get this working

[vishytk]

TailwindCSS 2.1.4

Install this plugin and configured tailwind.config.js

variants: {
extend: {
width: ['before', 'after'],
height: ['before', 'after'],
borderRadius: ['before', 'after'],
backgroundColor: ['active', 'before', 'after'],
}
}

HTML

  <div class="py-10">
    <p
      class="w-20 h-20 before:h-10 before:w-10 before:bg-red-300 bg-green-500 before:empty-content"
    ></p>
  </div

I can only see content = '' in devtools

What am I missing or doing wrong ?