DioxusLabs / DioxusLabs/dioxus

Link component: active_class is sometimes not applied (tailwind)

Open
#5,318 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

**Problem**

Sometimes the tailwind classes in `active_class` do not get applied. I assume this is dependent on the order the tailwind classes, and not how it is in the html/rsx.

**Steps To Reproduce**

Might not result in the "failed" style, due to "correct" css order.

```rust
Link {
class: "text-gray-700 dark:text-gray-400",
active_class: "text-red-700 dark:text-brand-400",
to: Route::Home,
"Home"
}
```
**Expected behavior**

A solution might be to add a `!` in front of the active tailwind classes.
```rust
Link {
class: "text-gray-700 dark:text-gray-400",
active_class: "!text-red-700 dark:!text-brand-400",
to: Route::Home,
"Home"
}
```

Another option might be to add an `inactive_class` to the Link component. Such that `class` is always active. And depending on the route, `active_class` or `inactive_class` are added.

**Environment:**

- Dioxus version: 0.7.1
- Rust version: 1.93.0
- OS info: bazzite-43.20260212
- App platform: web

**Questionnaire**

I would like to fix and I have a possible solution.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the Link component and reproducing the reported web behavior with the Rust example using class and active_class. Compare active and inactive route rendering and verify that the intended active Tailwind classes reliably determine the final styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust, tailwindcss
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.