How do I conditionally render a tailwind class in react?-CodePudding

I am creating a website that uses Tailwind(3.0.2) and ReactJs (17.0.2).

I have a div that wraps a navbar I would like to render conditionally depending on screen size. This code works as the base case:

<div className= { (showIcon ? "left-0" : `-left-full`)   " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} >

For medium screens and larger (md: in tailwind), I have prepared this code which also works on its own :

<div className= {nav ? 'nav active' : 'nav'}  > // (Nav and nav active are states defined elsewhere)

I want to combine both snippets but my code throws compiler errors. For example:

<div className= { (showIcon ? "left-0" : `-left-full`)   " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} md:{nav ? 'nav active' : 'nav'} >

 Line 40:151:  Parsing error: Unexpected token (40:151)

CodePudding user response：

I hope this is what you need:

<div className={`
    fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 
    w-10/12 text-white p-2 flex flex-col

    ${showIcon?"left-0":"-left-full"}

    md:${nav ? 'nav active' : 'nav'}
    `}>

    </div>

CodePudding user response：

Using tailwind I often write utils classnames function to divide class into groups according to their type for more readable

const classnames = (...classes: string[]) => classes.join(` `);

<div className={classnames(
    `${showIcon ? "left-0" : "-left-full"}`,
    "fixed bottom-0 top-12",
    "bg-gray-500 bg-opacity-60",
    "w-10/12",
    "text-white",
    "p-2",
    "flex flex-col",
    "nav",
  )}
>

If you want to use directive with custom class you might need to use screen()

@media screen(sm) {
  .your-class {
    @apply ...your-tailwind-classess
  }
}

@media screen(md) {
  /* ... */
}