Feedback on Tailwind Elements

[marsahadji]

Hello Tailwind Elements team!

I just started using Tailwind Elements and I wanted to give some feedback.
Overall, I think it's a fantastic product and it's really helped me speed up my web development process.

Shout out to Michal & Dawid for starting this & great thanks to @Trochonovitz @juujisai @Martussky @smolenski-mikolaj for all the work put in the latest release!

Keep coding!

[AkifKA]

Hello.
In tw-elements 1.0.0-beta-3 version, I could not run drop-down features in basic example in Navbar component.
I got the following error: tw-elements.umd.min.js:1: Uncaught SyntaxError: Unexpected token '<'

I checked the script path, it was correct.

I got the same error in tw-elements version 1.0.0-beta-2.

But bug fixed in tw-elements 1.0.0-beta-1 version.

Maybe I did something wrong. I will be glad if you check it out.

[juujisai]

Hi! @AkifKA

I have few questions that could help us figure out what is happening:

• How are you importing the tw-elements package?
• Are you using vanilla JS or something else?
• Did you try following our installation guide / integration tutorials?
• Does this error show in any other components?

[AkifKA]

• I imported tw-elements as script to index.html :
  <script type="text/javascript" src="../node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>
  and also tried importing to App.cs as import "tw-elements";
• I'm using react and taiwindcss.
• Yes i tried.
• I haven't tried it in other components.

[AkifKA]

for example drop-down not working here
https://github.com/AkifKA/my-app

[juujisai]

Most likely since you are adding the package as a script, the initialization is running before your React component is beeing mounted. You can try using dynamic imports in useEffect of your component but I suggest following our react integration tutorial and importing only the components you need (ES package).

Link to the tutorial:
https://tailwind-elements.com/docs/standard/integrations/react-integration/

If you don't want to do any of that, try initializing the Dropdown via Javascript (UMD):
https://tailwind-elements.com/docs/standard/components/dropdown/#api-section-usage

[AkifKA]

Sorry, I haven't seen this document.

I am beginner level.

I understood that I only need to import the component I need with useEffect, but I did not understand which component to import. Datepicker and Input are imported in the tutorial.

So I don't understand what to import to use hamburger menu and dropmenu in navbar.

So you said "ES package", I didn't understand that.

Anyway, I'm using the beta-1 version, thanks for your immediate response.

[juujisai]

Every example in documentation has a Javascript card with components that needs to be initialized when using package in ES format.

Since you are importing the UMD one so you don't have to import any of them. The issue is just the timing, using the script tag in html could make the initialization fire faster than you actual react component thats why I asked to try initing via Javascript or importing the package in useEffect hook.

If you wish to read more about ES and UMD formats of Tailwind Elements, checkout those links:

• https://tailwind-elements.com/docs/standard/getting-started/quick-start/#formats
• https://tailwind-elements.com/docs/standard/getting-started/optimization/#modules
• https://tailwind-elements.com/docs/standard/components/dropdown/ - on dropdown example, how to initialize the component in both formats

[AkifKA]

There are also things needed in the document.
I got it and got it working.
Thanks a lot.