Open SpencerIsTheKey opened 9 months ago
I also had this same problem, when passing a prop "directly" to the component, in your case the prop "active":
const NavLinkWrapper = tw.div`
text-base
relative
transition-all
duration-200
hover:font-bold
md:flex-row
md:w-fit
md:gap-24
md:items-center
${active ? "font-bold": "" }
`
Try passing it like this:
<NavLinkWrapper active={active}>
<Link href={href} >
{text}
</Link>
<NavAnimation />
</NavLinkWrapper>
🇧🇷 Tradução: Pra quem teve o mesmo erro (igual a mim), provávelmente é porque a prop "active" está sendo passada diretamente para o comoponente criado com tw (primeiro exemplo), basta passar a prop para o componente como o segundo exemplo.
I recently started a new personal project and decided to take the opportunity to learn Tailwind CSS after working with vanilla CSS for a while. I quickly found that it I was having to scroll horizontally to see all of my styles, and found that this library made my life much easier.
I then built the following components with it to create my navigation bar:
NavItem.tsx:
NavBar.tsx:
Once I added this to my layout, a runtime error occurred that was labelled
TypeError: l is not a function
, with the trace showing an origin inside a tailwind-styled-components file. Two function calls into tailwind-styled-components, in factI've checked through all of my Tailwind classes to make sure that I'm not trying to use an invalid class, and the only thing I found that might have been complicating things was the
md:before:
classes. I split the styled class to remove those modifiers like so:But found no difference. I then removed the Tailwind classes from the styled components and applied them to regular HTML elements and found the issue to be resolved. I would really love to be able to use this for my project, but as it stands now it seems to simply not work