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 ?