Tailwind with ternary operator - Active vs Inactive class - css

Question

I am working on a project with React and using Tailwind as my CSS.
I have got a Sidebar that should really not be present in the landing page when user lands only when clicking burger menu. At the moment this is present when user lands and it's looking slightly funny. I am thinking this might be related with the fact that tailwind doesn't recognise activeclasses in Ternary Operators.
My code:
import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import {SidebarData} from './SidebarData';
function Navbar() {
const [sidebar,setSidebar] = useState(false)
const showSidebar =() => setSidebar(!sidebar)
return(
<>
<div className="navbar flex bg-white text-black h-12 justify-start items-center m-0 p-0 ">
<Link to ="#" className="menu-bars ml-8 text-4xl bg-none">
<FaIcons.FaBars onClick={showSidebar}/>
</Link>
</div>
<nav className={sidebar ? 'nav-menu active left-0 transition duration-250 ' : 'nav-menu bg-white w-1/4 h-screen flex justify-center fixed top-0 -left-100 transition duration-1000'}>
<ul className="nav-menu-items w-full " onClick={showSidebar}>
<li className="navbar-toggle w-full h-5 flex justify-start items-center">
<Link to='#' className="menu-bars flex justify-start items-center pt-8 pr-0 pb-10 list-none h-1">
<AiIcons.AiOutlineClose/>
</Link>
</li>
{SidebarData.map((item,index) =>{
return (
<li key={index} className="{item.cName}">
<Link to={item.path} className="text w-11/12 h-full flex items-center pt-0 pb-1 border">
{item.icon}
<span className="ml-1">{item.title}</span>
</Link>
</li>
)
})}
</ul>
</nav>
</>
);
}
How it looks like:
How it should really look like when you land:
After clicking the burger menu:
This one is in black but you get the picture. It's quite different.
All help is appreciated,thanks!

Answer 1

Please make sure that your tailwind config files are configured properly for the active class and check out this tutorial here