CODEWITHSUNDEEP
javascriptcssreactjstypescripttailwind-css
Tushar Gaurabh jha
Tushar Gaurabh jha

Reputation: 593

How to add a style on a condition in tailwind css

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>

Upvotes: 31

Views: 142603

Answers (8)

Ron Zano
Ron Zano

Reputation: 580

Other answers didn't mention this, but when using Tailwind CSS with conditional classes, you might run into issues where some utilities conflict.

To solve this, you can combine the tailwind-merge library with clsx (or classnames).
This combo allows you to manage conditional classes while automatically resolving any Tailwind conflicts.

Here's a simple approach as suggested in this post:
First, create a utility function that merges clsx and tailwind-merge:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...args: ClassValue[]) {
  return twMerge(clsx(args));
}

Then, use this function in your component:

<... className={cn(
  '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',
  window.location.pathname === '/' ? 'border-red-200' : 'border-white'
)}>

This way, you get clean, conflict-free class handling in your Tailwind CSS setup :)

Upvotes: 0

Ali Palvane
Ali Palvane

Reputation: 331

write your classname like this in li tag:

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' : ''}`}

Upvotes: 2

nishar
nishar

Reputation: 27

you can use clsx npm package is most used in industries https://www.npmjs.com/package/clsx

example : className={clsx( condition ? 'bg-black text-white' : 'border-transparent, 'another css')}

Upvotes: 1

nitwit
nitwit

Reputation: 586

you can have a state isSelected that changes onClick. then create a function that accepts the state and then use it inside className:

// clsn function module:
export default function clsn(...args) {
    return args.filter(Boolean).join(" ");
}

import clsn from ".../module_path";

const [active, setActive] = useState(false);
const clickHandler = () => {
    setActive(!active);
    };
return (
...
    <NavLink
        className={
            clsn("inline-flex",
            active && "bg-red");
        }
        onClick={clickHandler}
    >
)

this way inline-flex styles applies always, and bg-red styles applies only when active is true.

Upvotes: -1

J_Bon
J_Bon

Reputation: 180

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' : ''}`

Upvotes: 7

BobRowsse
BobRowsse

Reputation: 161

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'}

Upvotes: 16

Pavan BN
Pavan BN

Reputation: 89

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>

Upvotes: -3

Aseer KT
Aseer KT

Reputation: 703

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 === '/' 
    }
)}>

Upvotes: 56

Related Questions