Как задать переменную ширину в классе CSS или Tailwind?

Я получаю ширину из моего Django View, но я не знаю, могу ли я сделать ее переменной в CSS.

Я пытался установить Tailwind, но представляю, что это не то, что нужно:

{% for movie in movies %}
<div id="bar" class="w-[{movie.score}]"
style="transition: 1s">
          {{movie.score}}
</div>
{% endfor %}

Однако я также пытаюсь сделать это непосредственно в CSS, но стиль не принимает переменную как:

{% for movie in movies %}
<div id="bar" style="transition: 1s; width: {{movie.score}}; ">
          {{movie.score}}
</div>
{% endfor %}

Я также пытался изменить его с помощью JavaScript, но мне нужно выбрать несколько элементов, потому что там будут разные полосы. Так что это просто не работает. Я получаю сообщения, что ролики были объявлены раньше, если я использую let, но при использовании var ничего не меняется.

def get_context_data(self, **kwargs):

        context = super(MoviesRatePage, self).get_context_data(**kwargs)

        context['movies'] = movies

        return context

{% block javascript %}
    <script type="text/javascript">

      var movies = "{{movies}}";

      for (let i = 0; i < movies.length; i++) {
        document.querySelectorAll("#bar")[i].style.width = `${movies[i].score}%`;
      }

    </script>
    {% endblock javascript %}

Таким образом, я хочу сделать ширину полосы такой же, как у оценки фильма.

{% for movie in movies %}
<div id="bar" style="transition: 1s; width: {{movie.score}}px; ">
          {{movie.score}}
</div>
{% endfor %}