How to Change Tailwind Styles Based On React Variable

[JimLynchCodes]

Hello! I have a header bar, and I'm trying to have it display / hide when the user click a button a toggles a boolean React component state variable.

This is how I would like it to look when expanded:

Here is my code for the toggle button:

 <div className="my-8 block lg:hidden" onClick={() => toggleOpen(!expanded)}>
          <button className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
            <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
          </button>
        </div>

Here is a snippet of the div that I would like to hide:

 <div className={"w-full block flex-grow lg:flex lg:items-center lg:w-auto"}>

When I add the "hidden" tailwind class (short for display: hidden;) then the expandable part does hide correctly:

<div className={"w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden"}>

If I try to modify the classes dynamically based on the React variable though... it doesn't work.

 {JSON.stringify(expanded)}

 <div className={"w-full flex-grow lg:flex lg:items-center lg:w-auto " + expanded ? 'block' : 'hidden'}>

[JimLynchCodes]

[venus0311]

thk

[PILO7980]

<div className={"w-full flex-grow lg:flex lg:items-center lg:w-auto " + (expanded ? 'block' : 'hidden')}>

[theabhayprajapati]

you can use

{`text-white ${true?'text-green-500' : 'text-red-500'`}

with curly braces and backticks you can do easily.

[theabhayprajapati]

<div className={"w-full flex-grow lg:flex lg:items-center lg:w-auto " + (expanded ? 'block' : 'hidden')}>

oh boi is this hard to ready

✅ Better one.

you can use

{`text-white ${true?'text-green-500' : 'text-red-500'`}

with curly braces and backticks you can do easily.

[sriram-balaganeshan]

this is i used in my project and its works perfect
className={
" flex font-sans font-medium text-center text-xs rounded !h-[40px] m-[8px] group hover:bg-black-opacity-15 " +
${val.active ? "bg-activeSidebar" : ""}
}
need space for + , ` these two

[mujtabafromthedarkside]

It took me an hour to realize those are backticks on the outside

[ginogardiola]

react is garbage

[JimLynchCodes]

Thanks @PILO7980 !

I would think these are equivalent. Why does the it work only when there are extra parentheses? 🤔

[adamwathan]

I'm guessing that without the parentheses it's being interpreted like this:

 <div className={("w-full flex-grow lg:flex lg:items-center lg:w-auto " + expanded) ? 'block' : 'hidden'}>

[robertt]

This works, but I really hate the syntax - I know this has nothing to do with tailwind but I hate having to write stuff like that. I really wish there was some :class like there there is in alpine and vue, making it a lot more readable.

(I'm also not sure if it's only me but sometimes I have to put my conditional classes at the end instead of at the start, not sure if this is me just being bad at tailwind but it looks even worse when you have a combination).

[peacepostman]

Ow boy was i wrong, i was missing the configuration hint for disabled:opacity. So yes, it works great with classNames

[dillonstreator]

https://github.com/lukeed/clsx is likely a better option for it's speed and footprint and it can act as a drop-in replacement for classnames

[Axedyson]

Do classNames work with tailwindcss vscode extension

[amannn]

I'd be curious if there's a variant of a utility like clsx that handles overrides? E.g.:

clsx('p-4', 'p-2'); // p-2
clsx('p-4', 'pt-2'); // pt-2 px-4 pb-4

That would be really handy to allow for overrides in components. Often you'd probably want to avoid this, but I think it can be a nice escape hatch and such a utility function would support the pattern without specificity issues.

[Pika-Pool]

@peacepostman , how did you make tailwind work with classnames? I'm using tailwind 3.0, and when I do this:

className={classNames(
	'flex justify-center items-center gap-2 rounded lg:px-8 lg:py-3 border border-primary',
	{ 'color-primary bg-transparent': votedByMe },
)}

the conditional classes are not included in the generated css.

[bartenra]

You can also use template strings:

export const TextInput = ({error, ...props}: TextInputProps) => {
  return (
    <div className="flex flex-row justify-center">
      <input type="text" {...props} className={`w-full p-3 my-3 text-xl border-4 ${error ? "border-red-400" : ""}`} />
    </div>
  )
}

[davidparys]

How do you handle the ugly empty spaces for falsy values?

[theolvq]

You could use the short-circuit operator

export const TextInput = ({error, ...props}: TextInputProps) => {
  return (
    <div className="flex flex-row justify-center">
      <input type="text" {...props} className={`w-full p-3 my-3 text-xl border-4 ${error &&  "border-red-400" }`} />
    </div>
  )
}

[Axedyson]

Okay but if error is false this is what gets rendered:

`w-full p-3 my-3 text-xl border-4 `

As you can see there is still a whitespace at the end of the string 😕

[tonny008]

short-circuit operator ${error && "border-red-400" }. if error = false, the output is false

[davidparys]

short-circuit operator ${error && "border-red-400" }. if error = false, the output is false

Yes sure but since it's a template literal, if error it will actually return the error inside the class

[matheuslemke]

Just to complement with another case... I've tried to do something like bg-${color}, but DIDN'T WORK:

// color being like red-200
const Area = ({ title, color }: AreaProps) => {
  return (
    <div className={`h-[50vh] flex items-center justify-center font-sans bg-${color}`}>
      <div>{title}</div>
    </div>
  )
}

You had to provide the entire property, like:

// bgColor is something like bg-red-200
const Area = ({ title, bgColor }: AreaProps) => {
  return (
    <div className={`h-[50vh] flex items-center justify-center font-sans ${bgColor}`}>
      <div>{title}</div>
    </div>
  )
}

[rutvik24]

Thanks bro

[DDSAO]

I have encountered the same issue. Can somebody provide some insights about how and why?

[wongjn]

From the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

[rutvik24]

Instead of passing variable to the class make variable with class then pass it it will work
Like const hClass = h-[2px];
className=${hClass}

Try above one instead of this
const height = 2px;
className=h-${height}

[stub4ever]

Thank you bro

[Axedyson]

Simple solution just use this tool

[yousif-khalil-abdulkarim]

You could use the class variance authority library which makes it easy to create component libraries with tailwind.

[kubo550]

Maybe you can achieve what you need using the style property where you can use variables.

        <img
              className="absolute bottom-0"
              style={{ transform: `rotate(${needleRotation}deg)` }}
              src="image.png"
            />

[estebangarviso]

Try to use prop-types https://blog.logrocket.com/theming-react-components-tailwind-css/

// src/components/Button.js
import themeProps from "./themeProps";
const Button = ({ children, color, ...rest }) => {
  return (
    <button className={`rounded-md bg-${color} text-text-base px-3 py-1`} {...rest}>
      {children}
    </button>
  );
};

Button.propTypes = {
  ...themeProps,
};

Button.defaultProps = {
  color: "primary",
};

export default Button;

[manuelhonoredesousa]

I hope you see this -> https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants