Getting started with AlpineJS

Binding TailwindCSS classes based on AlpineJS state

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

Modified files

static/input.css

--- 
+++ 
@@ -52,4 +52,16 @@

 .allauth-form p:has(input[type="email"]) label {
   @apply font-bold;
+}
+
+.article-status-draft {
+  @apply bg-gray-200;
+}
+
+.article-status-published {
+  @apply bg-green-200;
+}
+
+.article-status-inprogress {
+  @apply bg-amber-200;
 }

templates/app/layouts/base_form.html

--- 
+++ 
@@ -13,7 +13,7 @@
     </div>

     <div class="flex gap-10 mb-10 items-center">
-      {% render_field form.status class="text-xs border-none rounded-sm uppercase" x-model.fill="articleStatus" %}
+      {% render_field form.status class="text-xs border-none rounded-sm uppercase" x-bind::class="`article-status-${articleStatus}`" x-model.fill="articleStatus" %}
       {% block article_stats %}

       {% endblock article_stats %}