Conditional utility classes using Tailwind and Astro

Question

I am using Tailwind and Astro.

I created this menu link component:

// MenuItem.astro

---
type Props = {
  title: string;
  path: string;
};

const { title, path } = Astro.props;
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1);
---

<li>
  <a
    href={path}
    class=`${currentPath === path
? 'text-red'
: 'text-blue'} relative`
    >{title}</a
  >
</li>

Is there a way to make this cleaner? To use something different then a ternary, using Astro?

Answer 1

You can use the class:list syntax docs

<li>
  <a
    href={path}
    class:list={
 [
   {
      relative:true,
      'text-red': currentPath === path,
      'text-blue': currentPath !== path
    }
  ]
}
    >{title}</a
  >
</li>

Answer 2

You can use the built-in class:list as mentioned but I think you'll still need tailwind-merge so you could use a utility like:

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

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

...
// import cn and use 
className={cn(currentPath === path ...)} // etc