javascript - How do I conditionally render a tailwind class in react? - Stack Overflow

admin管理员组

文章数量:1417061

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 bine both snippets but my code throws piler 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)

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 bine both snippets but my code throws piler 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)

• javascript
• reactjs
• tailwind-css

Share Improve this question Follow edited Mar 20, 2022 at 15:41 dragoon asked Mar 20, 2022 at 15:06 dragoondragoon 1111 silver badge22 bronze badges 1

• It should be better if you have provided the error you are getting, but mostly the error might be ing from your md: which is not wrapped in quotes then react handle it as a variable, try using literal string notation and wrap them all – Janvier Habineza Commented Mar 20, 2022 at 15:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>

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-classes
  }
}

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

本文标签： javascriptHow do I conditionally render a tailwind class in reactStack Overflow