Творный ветер с тройным оператором - активным против неактивного класса ⇐ CSS

[Anonymous]

Я работаю над проектом с React и использую Tailwind в качестве CSS. На данный момент это присутствует, когда пользователь приземляется, и это выглядит немного смешно. Я думаю, что это может быть связано с тем фактом, что Tailwind не распознает активные классы в тройных операторах.
Мой код:

Код: Выделить всё

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(


[*]




[list]





{SidebarData.map((item,index) =>{
return (
[*]

{item.icon}
{item.title}


)
})}
[/list]


);
}

Как это выглядит:

Как это должно выглядеть, когда вы приземляетесь:


Подробнее здесь: https://stackoverflow.com/questions/646 ... tive-class