Update HTMX version

[afsangujarati93]

I am trying to use some HTMX extensions but it looks like they're probably not working because the HTMX package used in unfold hasn't been updated for quite a while. Any chances that we could update the HTMX version in this project?

[jdenisTLM]

What extention are you using ? I've not encountered any issues on my side ...

I'm using it like this in my config/settings/base.py :

UNFOLD = {
    ...
    "SCRIPTS": [
        "https://unpkg.com/htmx.org@1.9.11/dist/ext/client-side-templates.js",
        "https://unpkg.com/mustache@latest",
    ],
    ...

[afsangujarati93]

I was having issues with https://htmx.org/extensions/response-targets/. Let me try it your way though.

[jdenisTLM]

I think you are right. the extension you are using call api.getClosestAttributeValue, and this function is present in the last htmx version, but not in the unfold included htmx version. But you could easily override unfold template to include your own version : templates/unfold/layouts/skeleton.html

I've made a test by replacing htmx version with the latest, and response-targets extension works like this !

What could be done to improve unfold, would be to add all base scripts in a block, to be able to just override base scripts. So transforming :

<script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
<script src="{% static 'unfold/js/alpine.js' %}" defer></script>
<script src="{% static 'unfold/js/htmx.js' %}"></script>
<script src="{% static 'unfold/js/chart.js' %}"></script>

to :

{% block basescript %}
    <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
    <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
    <script src="{% static 'unfold/js/htmx.js' %}"></script>
    <script src="{% static 'unfold/js/chart.js' %}"></script>
{% endblock basescript%}

In this way, we would be free to do whatever we want !

[afsangujarati93]

Another question, why is it that I use certain tailwind css class in my template I don't see the expected change. e.g. when I tried to add bg-green-300 class to a button it didn't work. However, when I added bg-green-500 it worked. Same happened when I tried to use negative margins -m-16 doesn't work. Is there a step that I am missing?

This works

<button 
    type="button"
    class="border border flex items-center h-9.5 px-2 rounded shadow-sm text-white {% if connected %}bg-red-500{% else %}bg-green-500{% endif %}" 
    onclick="window.location.href='{{url}}';"
  >

However, when I do this

<button 
    type="button"
    class="border border flex items-center h-9.5 px-2 rounded shadow-sm text-white {% if connected %}bg-red-300{% else %}bg-green-300{% endif %}" 
    onclick="window.location.href='{{url}}';"
  >

I am new to this tailwind and htmx world so sorry if I am making a silly mistake here.

[jdenisTLM]

I suggest you to read how taillwind works : https://tailwindcss.com/docs/installation Then you can override unfold tailwind styles.css. Tailwind feed css file from templates you write, and class you put in your templates.