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

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

spacerobotTR asked in 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.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 38,558+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.