How to add a style on a condition in tailwind css

user_10459996 0
Viewed 23136

I am making a Side Nav in React using tailwind css I have to add border-red color when a particular link is selected. So I am using this approach But this is not working Can anyone help me here

<li className={"flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white" + (window.location.pathname === '/' ? 'border-red-200' : '')}>
              <NavLink to={"/"}>
                <div className="sidebar">
                  <div className="float-left">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-8 w-6 text-red-400"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                      />
                    </svg>
                  </div>
                  <span className="text-2xl float-right pl-5">
                    Home
                  </span>
                </div>
              </NavLink>
            </li>
tailwind-css typescript reactjs css javascript
4 Answers

Use template literals, or use npm library classnames.

  • Using template literals
<... className={`flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white ${window.location.pathname === '/' ? 'border-red-200' : ''}`}>
  • Using classnames library
import classNames from 'classnames';

<... className={classNames('flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white',
    { 
        'border-red-200': window.location.pathname === '/' 
    }
)}>
user_143006080 
className={yourItem === value ? 'your-class' : 'or-default-to'}

` /* This applys classes if your set condition is true on not. Example below*/

className={active === value ? 'text-green' : 'text-white'}

class={active === value ? 'text-green' : 'text-white'}
user_171803910

Using classnames library is for me the cleanest way with multiple conditions:

import cx from 'classnames';

const classes = cx(
        'flex items-center justify-center', // classes that should be used in any case
        size === 'small' && 'h-10 text-lg px-2.5',
        size === 'medium' && 'h-12 text-lg px-4',
        variant === 'primary text-primary`,
        variant === 'secondary text-secondary`,
        fullWidth && 'w-full',
        className // classname passed from props
    );

But in you case string interpolation should be enough

`flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white ${window.location.pathname === '/' ? 'border-red-200' : ''}`
user_117437620

For NavLink component you can use activeStyle prop to apply styles when the link is active.

<NavLink
   to="/"
   activeStyle={{
   border-bottom: "2px solid red"; 
      }}
    >
     Link Name
</NavLink>
user_125310930
Related