Adding a className dynamically in React.js with Tailwind.css

Question

Let's say I have a React component that gets the Tailwind class name from props for example :

import React from "react";

export default function Header({navColor}) {

  return (
    <nav
    className="flex justify-center items-center text-white  text-xl h-14"> //I want to add a class that it's name is the (navColor) value to the nav tag 
      TEST
    </nav>
  );
}

How can achieve this?

This npm package is better for that purpose => npmjs.com/package/classnames — Amila Senadheera
– Amila Senadheera, Commented Jan 23, 2022 at 10:32
Thank you, what are the benefits of using this library over Template literals? — MrXQ
– MrXQ, Commented Jan 23, 2022 at 10:41
It abstract out all the possible ways to set class name dynamically with different conditions into a single function. You can reuse it everywhere. — Amila Senadheera
– Amila Senadheera, Commented Jan 23, 2022 at 10:55
Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML? — rozsazoltan
– rozsazoltan, Commented Sep 19 at 9:20

Shan · Accepted Answer · 2022-01-23 10:19:06Z

6

You can use Template literals to achieve that

Use ${} inside backticks ``

<nav
    className={`flex justify-center items-center text-white  text-xl h-14 ${navColor}`}> 
      TEST
</nav>

edited Jan 23, 2022 at 10:19

answered Jan 23, 2022 at 10:08

Shan

1,5684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Penguin · Accepted Answer · 2022-08-04 06:41:37Z

1

import classNames from "classnames";
import React from "react";

export default function Header({ navColor }) {
  const headerClass = classNames(
    "flex justify-center items-center text-white text-xl h-14",
    navColor,
  );
  return <nav className={headerClass}>TEST</nav>;
}

classNames is also one of good option. You don't have to worry about misadding whitespace.

answered Aug 4, 2022 at 6:41

Penguin

9511 gold badge10 silver badges23 bronze badges

2 Comments

CodeFinity Over a year ago

Not much need for classnames dependency when we can use template literals as above answer.

Hitesh Joshi Over a year ago

@CodeFinity Penguin's point is, not worrying about whitespaces. That's a big headache. Thats what classnames is solving. Not every dependency is heavy. Its a minimalistic function github.com/JedWatson/classnames/blob/main/index.js Thats all

Collectives™ on Stack Overflow

Adding a className dynamically in React.js with Tailwind.css

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related