search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

NavBar with collapse not work in react + vite #460

Closed 13RTK closed 2 months ago

13RTK commented 2 months ago

Summary

Responsive NavBar with collapse does not work in React + Vite

Steps to Reproduce

Tech stack: React | Vite | JavaScript (without react router)

My steps:

  1. Create a react project by vite
  2. Install tailwind and add config
  3. Install Preline and add config in tailwind.config.js
  4. Copy the code from preline navbar part, and try to run it image

The very strange thing is that the same code is working well in my Vue + vite project, so I can make sure my tailwind config is correct😅

This is the vue demo

Demo Link

https://stackblitz.com/edit/vitejs-vite-hf7tig?file=src%2Fcomponents%2FNavBar.jsx

Expected Behavior

The collapse should popup like the demo in preline doc image

Actual Behavior

Even when I click the button, the collapse still does not popup like official docs image does

Screenshots

No response

olegpix commented 2 months ago

@13RTK Hi, Please check out the demo for React on Stackblitz, which is specifically setup for the Vite. I also forked the demo you provided and tweaked it.

13RTK commented 2 months ago

@olegpix Thank you for your patient response, the problem is that I missed the script: