Can't get nextjs button manual background color to work with tailwind-CodePudding

I am trying to put a hex color on my button. I am using tailwindcss in my project. I can set the background color by using something like:

bg-blueGray-700

inside the className. But I want to add a custom hex that can be dynamic instead.

If I add the following directly via the inspector, the button will change color:

background-color: #fff

If I put it into the code, it will show via the inspector, but the button won't show it.

      <button
        background-color="#FFF"
        className="px-4 py-4 rounded"
        onClick={(e) => {
          e.preventDefault();
          doSomething();
        }}
      >
        Color
      </button>

CodePudding user response：

If you want to style your element directly, you have to use the style property:

<button style={{backgroundColor: "#FFF"}}

Css rule names then wrote differently because you pass an object: https://reactjs.org/docs/dom-elements.html#style