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)
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-classess
}
}
@media screen(md) {
/* ... */
}