What is the best way to add a dynamic active class to a link with Tailwind CSS?

From what I understand the "active variant" is not enabled by default? Where exactly do you enable that with rails? Is there another way to add and remove parts of classes to put together an active link depending on where you are in a rails site?

Any info is appreciated!

I either do it inline or in a helper.

Here's an inline example:

<%= link_to "Account", account_path, class: ["blue", ("active" if request.path == account_path)]

Ahhh yes that worked. Thanks!

Do you have to enable the active classes in Tailwind or are they there by default now? I didn't see a tailwind.js file only the postcss config. Is that where you would declare variants for tailwind?

You either need to define it or just have it add the classes you want to the list. "Active" means very different things depending on your UI design.

Thanks for the info! I was going by this video where he said the "active" variants were turned off by default to save space. I can create custom classes though.

https://tailwindcss.com/course/hover-focus-and-active-styles/

Ah sorry I was confused. I was thinking of the "active" state of a link / tab / etc.

He's referring to active like the &:active { css selector.