Tailwind: How to create a loading: modifier/variant? - tailwind-css

Question

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 className, "loading" -->
<button className="loading bg-blue-600 loading:bg-blue-100">
This is a loading button
</button>

Answer 1

& sign points to an element with THIS variant applied, so it should be translated in CSS as "this element with class .loading". In your example :loading will be translated as loading state which is not valid
So it should be addVariant('loading', '&.loading') not addVariant('loading', '&:loading')
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addVariant }) {
addVariant('loading', '&.loading') // here
})
],
};