Next.js Discord

Discord Forum

Next 15 with tailwind

Answered
gamy22 posted this in #help-forum
Open in Discord
gamy22OP
bg-color didn't override the bg inside the component

<NormalButton
              title={"REQUEST my CAR NOW"}
              whiteStadium
              className="bg-custom-grey-200 mx-auto"
            />


import React from "react";

const NormalButton = ({
  title,
  className = "",
  whiteStadium = false,
}: {
  title: string;
  className?: string;
  whiteStadium?: boolean;
}) => {
  return (
    <button
      type="button"
      className={`lg:min-h-12 px-6 lg:px-10 lg:h-12  rounded-[10px] ${
        whiteStadium
          ? "rounded-full bg-white text-foreground"
          : "bg-foreground text-white "
      } ${className}`}
    >
      {title}
    </button>
  );
};

export default NormalButton;


bg white now
Answered by Anay-208 | Ping in replies
You can use twMerge with this helper(from shadcn):

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}


It has clsx, which allows you to render classNames conditionally like
className={cn({
"rounded-full bg-white text-foreground": whiteStadium,
"bg-foreground text-white": whiteStadium
})}


Or just simply
className={cn(whiteStadium ? "classes" : "classes")}
View full answer

4 Replies

joulev
looks like twMerge https://github.com/dcastil/tailwind-merge will help with this
Anay-208 | Ping in replies
You can use twMerge with this helper(from shadcn):

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}


It has clsx, which allows you to render classNames conditionally like
className={cn({
"rounded-full bg-white text-foreground": whiteStadium,
"bg-foreground text-white": whiteStadium
})}


Or just simply
className={cn(whiteStadium ? "classes" : "classes")}
Answer
gamy22OP
i just forget cn
šŸ˜‚