Problems of Updating from 1.0.0-alpha to 1.0.0-beta1

[SergejGleithmann]

Hey everyone,

I have some problems with updating my code in order for it to work with the new version. I use Django and the previous TW-Elements version worked perfectly fine (I stored my index.min.js in the static-folder together with the tailwind CSS). However after upgrading and trying to translate to the new syntax some things do not wok properly and some do not entirely.

1. As for now I am not able to get the tooltip to work, even in the minimal working example of the tutorial the tooltip is not working.
2. The accordion however is only partly working. It folds and unfolds as expected, but the arrow does not turn when doing so. In the minimal example of the tutorial however it works, even with the same HTML.
3. The carousel turns, however one arrow is black and the buttons are not working.
4. The tabs are not working at all. Every container is always visible, no interactivity at all.

With the exception of the tooltip everything works fine in the tutorial setting (see picture for broken tooltip). In my setting however the above problems occur even when copying the html from the Components site.

I know that this description is very vague, but maybe someone can give me a reason, why with some components only part of the features are working, becouse I have no idea for an entrypoint of debugging. Are this maybe the parts that do not rely on js that are currently working?

I'm rather certain that the problem lies on my end, but I have no clue on where to start debugging. Can someone give me a hint?

Thanks in advance!

[Trochonovitz]

Hi, I created an issue from your post - we will check Tailwind Elements integration with Django but I cannot promise you anything.

[SergejGleithmann]

Ok, thank you!

[SergejGleithmann]

Hey, I have new insights.

First of all: it is not a Django Problem. I did not set up my config file correctly. It contained of a mixture of old and new tailwind syntax (content/purge for example), which did not produce arrors beforehand. I also updated Tailwind from 2.7. to 3.7 and now it works mostly (remember to run npm install after all version changes, I know most of you will know this, but I am stupid apparently).

As of now I managed to get the accordion and the carousel to work as intended. The tooltip however only works if i add

var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-te-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new te.Tooltip(tooltipTriggerEl);
});

and not via the data attributes.

The tabs and also the checkboxes did not yet work properly, but i'll keep on trying.