Having trouble with NavLink's activeClassName when using Tailwind CSS?

Can anyone help me with creating an active class for the navbar link that changes text color after selection? I'm having trouble figuring out where I might be making a mistake.

        <NavLink
            exact
            to="/"
            activeClassName="text-white"
            className="inflex-flex items-center py-6 px-3 mr-4 text- 
            red-200 hover:text-green-800 text-4xl font-bold cursive 
            tracking-widest"
            activeClassName="text-black"
          >
            Home
          </NavLink>
          <NavLink
            to="/project"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Projects
          </NavLink>
          <NavLink
            to="/post"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Blog Posts
          </NavLink>
          <NavLink
            to="/about"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
reactjsnavbartailwind-cssclassname

Answer №1

Here is a suggestion

classList='!text-red-100 !bg-red-700'

Answer №2

If you're experiencing issues with your link's hover color overriding the text color, consider incorporating a different style for the active state by adding red as a hover color:

activeClass="text-red-200 hover:text-red-200 bg-red-800"

Answer №3

styleName={({ showActive }) => showActive ? "text-blue-700 font-bold underline" : "" }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A method for assigning a single event listener to multiple events in a React component

I find myself in a situation where I have two events, onClick and onSelect, both of which share the same event handler. I am wondering what the most efficient way to handle this scenario would be - should I create a common method and then call the event ...

javascriptreactjs

Obtain information from JSON within a function

I am struggling with extracting data from a JSON file in my React project. Despite having all the required data, I am not getting any output. Can someone please assist me? The value of this.props.id is 2, and I am attempting to locate the corresponding da ...

reactjs

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...

javascriptreactjsnext.jsuse-state

The react-bootstrap implementation is not functioning as expected, resulting in an unsupported server component error

Having an issue with an Unsupported Server Component Error while using react-bootstrap with typescript. I've shared the contents of my page.tsx file, layout.tsx file, and the specific error message. layout.tsx file import type { Metadata } from &apos ...

javascriptreactjsnext.jsreact-bootstrap

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...

javascriptreactjstypescriptnext.js

Modifying the sorting icon appearance for table header columns in React Material-Table: A step-by-step guide

Is it possible to customize the sorting icons on React Material-Table table header columns? For example, I would like the ascending sorting icon to be ArrowDownward and the descending sorting icon to be ArrowUpward. I have attempted to set the SortArrow ic ...

reactjsmaterial-uimaterial-table

Issue with Material UI textfield: Unable to enter input or set values on a controlled component

I recently attempted to develop a customized input component using the inputRef feature in Material UI's Input component. Although I successfully implemented the component reference, I encountered an issue where I could not enter any values into the t ...

reactjsmaterial-ui

Tips for selecting the best className type for material-ui components

Currently, I am integrating material-ui into a react app that is built using typescript. Within the material-ui framework, there is a feature called withStyles which allows styles to be injected into a component through its className. However, I am facing ...

reactjstypescriptmaterial-ui

Leveraging JSON Data for Avatars in React.js

Struggling to arrange 10 Avatars side by side for showcasing the user list. However, encountering an issue where the Avatars are being duplicated and showing incorrect initials when passing JSON data. Experimented with this in Code Sandbox linked below. h ...

javascriptreactjsmaterial-uiavatar

Error TS2694 is being caused by Electron Typescript Material-UI withStyles because the namespace "".../node_modules/csstype/index"" does not have an exported member called 'FontFace'

While I am experienced with Material-UI, I am relatively new to Electron and using React, TypeScript, and Material-UI together. Recently, I encountered an error while attempting to create an electron boilerplate code for future project initialization. Init ...

reactjstypescriptmaterial-uielectron

Decoding Rich Text Content into Coherent Array Components: Strategies for Splitting Text and Images

I've been developing a blog platform that uses Rails as the backend CMS and React for the frontend. In my Rails application, I'm making use of a rich text editor to create content. The content is then passed from the backend to the frontend to po ...

reactjsruby-on-railsrichtext

eliminating items from an array nested inside another array

****************UPDATED********************************************************* I am stuck trying to manipulate an array within another array and remove elements based on conditions. The main goal is to make changes without altering the original array of ...

javascriptarraysreactjsreact-native

Tips for achieving expansion of solely the clicked item and not the whole row

I am trying to create a card that contains a cocktail recipe. The card initially displays just the title, and when you click on a button, it should expand to show the full menu and description. The issue I'm facing is that when I click on one element, ...

javascriptreactjsmaterial-uimaterial-design

Managing HTTP errors using async/await and the try/catch block in a React application with TypeScript

Below is a snippet of code I am working with! import React, { useState } from "react"; function App() { const [movies, setMovies] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState<string ...

reactjstypescriptasync-awaittry-catchhttp-error

React Hook Form is flagging missing dependencies in the useEffect function

Before posting this question, I made an effort to search for a solution on Google. However, I am puzzled by the warning that the linter is giving me regarding my code. The warning message reads: ./components/blocks/Contact.tsx 119:6 Warning: React Hook us ...

reactjstypescriptnext.js

Is there a significant distinction between value and defaultValue in React JS?

React's homepage features the final illustration (A Component Using External Plugins) with a textarea: <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> While typing, the ...

javascriptreactjs

Issue with React event hierarchy

How can I effectively manage state changes in a deep node that also need to be handled by a parent node? Let me explain my scenario: <Table> <Row prop={user1}> <Column prop={user1_col1} /> <Column prop={user1_col2} /> ...

javascriptreactjsfluxreactjs-flux

How can we use SWR to fetch user data conditionally based on their logged-in state?

I am facing an issue with setting the UI state based on whether a user is logged in or not. The UI should display different states accordingly. I am currently using SSG for page generation and SWR for user data retrieval. However, I noticed that when call ...

javascriptreactjsauthenticationnext.jsswr

Using typescript in react to define conditional prop types

Currently, I am utilizing react-select as my select component with the multi prop. However, my goal is to have the onChange argument set as an array of options when the multi prop is true, and as OptionType when false. To achieve this, I am implementing di ...

reactjstypescript

Tips for accessing specific product information based on its unique identifier in a Reactjs and Laravel Application

Looking for assistance to display selected product details utilizing React and Laravel. Once a product is selected, the ProductDetails page should show all relevant details of the chosen product. However, I am encountering issues where I only receive data ...

reactjslaravel