Tailwind: How to create a loading: modifier/variant?

I'm trying to create a modifier for a button for when it's in a loading state.

Based on the documentation here, I added the following in my tailwind.config.js

// I assume this is included in tailwindcss and doesn't need to be installed separately
const plugin = require('tailwindcss/plugin')

module.exports = {
     // ...
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('loading', '&:loading')
          })
    ],
};

I assume this allows me to add a string of loading in the class such that it will apply those styles. This doesn't seem to work though, what am I doing wrong?

// I assume this should be blue-600 
<button className="bg-blue-600 loading:bg-blue-100">This is a normal button</button>
// I assume this should be blue-100 since it has the string "loading" in the className
<button className="loading bg-blue-600 loading:bg-blue-100">This is a loading button</button>
``