Cannot add dynamic classes using classNames in NextJS

Question

Here is my code using Tailwind and classnames library:

import React from 'react';
import cn from 'classnames';

function Navbar({
  left,
  title,
  right,
  bgColor = 'primary-800',
  textColor,
  sticky = true,
}) {
  return (
    <div
      className={cn({
        [`bg-${bgColor}`]: true,
        [`text-${textColor}`]: true,
        ['sticky top-0']: sticky,
        ['z-10 flex h-11 items-center px-4 py-5 font-semibold shadow']: true,
      })}
    >
      <div className="h-5 w-5 flex-none">{left}</div>
      <div className="grow text-center">
        <span>{title}</span>
      </div>
      <div className="h-5 w-5 flex-none"> {right}</div>
    </div>
  );
}

export default Navbar;

When I deploy the code, the generated CSS file does not contain bg color property.

class="bg-primary-800 text-white z-10 flex h-11 items-center  px-4 py-5 font-semibold shadow sticky top-0"

There is no problem with the class.

Is it because tailwind is purging the unused classnames?

[Yes, see this answer](https://stackoverflow.com/questions/71553240/tailwind-custom-colors-is-not-working-in-next-js-project/71559236#71559236) — kelsny, Mar 25 '22 at 14:03
Ah wait that one's a duplicate. [Original](https://stackoverflow.com/questions/68020378/how-to-use-template-literals-in-tailwindcss-to-change-classes-dynamically) — kelsny, Mar 25 '22 at 14:05
Does this answer your question? [How to use template literals in tailwindcss to change classes dynamically?](https://stackoverflow.com/questions/68020378/how-to-use-template-literals-in-tailwindcss-to-change-classes-dynamically) — kelsny, Mar 25 '22 at 14:07

Cannot add dynamic classes using classNames in NextJS

0 Answers0