tailwindcss-empty

Dead simple Tailwind plugin that adds a variant for the :empty CSS pseudo-class.

Installation

npm i tailwindcss-empty

Usage

In your tailwind.js:

  modules: {
    // The plugin only generates classes when you explicitly
    // register the 'empty' state variant for a module
    display: ['responsive', 'empty'],
    // ...
  },
 
  plugins: [
    require('tailwindcss-empty')(),
    // ...
  ]

In your HTML:

<!-- This span will be displayed normally. -->
<span class="errors empty:hidden">Whoops!</span>
 
<!-- This one will be hidden. -->
<span class="errors empty:hidden"></span>