使用 Tailwind css 设计 Navlink

Posted

技术标签:

【中文标题】使用 Tailwind css 设计 Navlink【英文标题】:Styling Navlink using Tailwind css 【发布时间】:2021-06-22 01:38:00 【问题描述】:

我正在尝试将 tailwind-css 添加到 Navlink(react-router-dom)。我想添加积极的风格。要添加活动样式,我可以使用

<NavLink to="/faq" activeStyle=fontWeight: "bold",color: "red">
  FAQs
</NavLink>

有没有办法用tailwind-css做到这一点,我不想用css,也许是这样的?

<NavLink to="/faq" className=`$active?'font-bold text-red':'text-gray-900'...`>
  FAQs
</NavLink>

【问题讨论】:

【参考方案1】:

NavLink 组件有一个activeClassName 属性。

https://reactrouter.com/web/api/NavLink

【讨论】:

以上是关于使用 Tailwind css 设计 Navlink的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Tailwind 向此设计添加“标题”

Tailwind CSS:伪类之前

将导航选项卡添加到 Tailwind CSS 导航栏

NuxtJS + BootstrapVue + TailwindCSS:我可以有效地使用 Bootstrap Vue 组件,但使用 Tailwind CSS 样式?

Tailwind.css — 如何使用 Tailwind 实现 last-child?

Tailwind CSS 备忘清单_开发速查表分享