TailwindCSS 동적 스타일 적용하는 법

1. 동적으로 스타일 적용하기

function Page() {

  const display = "flex justify-between items-center";
  const bgColor =  dark ? "bg-stone-400" : "bg-white";
  
  return (
    <div className={`${display} ${bgColor} w-full`}>
    	...
    </div>
  );
};

export default Page;

2. 동적으로 Color 적용하기

function Button({ color, children }) {
	const colorVariants = {
      blue: "bg-blue-600 hover:bg-blue-500",
      red: "bg-red-600 hover:bg-red-500",
      white: "bg-white-600 hover:bg-white-500",
      gray: "bg-gray-600 hover:bg-gray-500",
      pink: "bg-pink-600 hover:bg-pink-500",
      cyan: "bg-cyan-600 hover:bg-cyan-500",
      sky: "bg-sky-600 hover:bg-sky-500",
      indigo: "bg-indigo-600 hover:bg-indigo-500",
      stone: "bg-stone-900 hover:bg-stone-800",
      emerald: "bg-emerald-600 hover:bg-emerald-500",
      amber: "bg-amber-100 hover:bg-amber-50",
      orange: "bg-orange-800 hover:bg-orange-700",
      indigo: "bg-indigo-600 hover:bg-indigo-500",
	}

  	return (
        <button className={`${colorVariants[color]} ...`}>
          	{children}
        </button>
  	)
}

참고 Link