Active state in Tailwind CSS

Some ways how to add an active state in Tailwind

1. Using tailwindcss/plugin

• import tailwindcss/plugin

js -> const plugin = require('tailwindcss/plugin')
ts -> import plugin from 'tailwindcss/plugin';

• define addVariant active in plugins:[]

plugins: [
	plugin(function({ addVariant }) {
		addVariant('current', '&.active');
	})
],

• then use it on HTML like this [&.active]:

<li class="[&.active]:bg-red-200">menu</li>

2. Using data-active="true"

• Add a data-active="true" to the with your logic.
• Then you may apply classes without needing to modify your plugins in your tailwind.config.js like so: <a data-active="true" href="#" class="data-[active=true]:bg-red-200">
• This is the active class name from above to modify the background color:
• data-[active=true]:bg-red-200

^ This is how the Next.js <Link></Link> adds active state to menu links.

source: stackoverflow.com