Simple Toggle with Tailwind + AlpineJs refuses to work

Why is my simple toggle with Tailwind and AlpineJs not working?

<!-- This example requires Tailwind CSS v2.0+ -->
<div x-data="{ isLive : false }" :class="flex items-center justify-between">
  <span class="flex-grow flex flex-col">
    <span class="mr-2 text-sm font-medium text-gray-900" id="availability-label">Publish: </span>
  </span>
    <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
    <button type="button" @click="isLive != isLive" :class="isLive ? 'bg-indigo-600' : 'bg-gray-200' relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description">
        <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
        <span aria-hidden="true" :class="isLive ? 'translate-x-5' : 'translate-x-0' pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
    </button>
</div>

Browser throws the following error -

Alpine Expression Error: Unexpected identifier

Expression: "isLive ? 'translate-x-5' : 'translate-x-0' pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"

Sinnbeck

3 years ago

Level 102

Try adding a regular class for the static classes

:class="isLive ? 'bg-indigo-600' : 'bg-gray-200'" 
class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"

thebigk

3 years ago

Level 13

@sinnbeck - that doesn't work either. I thought my class binding ain't correct. But it's pretty much like what the Alpine documentation says.

Sinnbeck

3 years ago

Level 102

@thebigk same error ? Did you remember to change both?

thebigk

3 years ago

Level 13

@Sinnbeck Yes, exactly. Not sure what's going on.

I've began using the code from


<!-- Toggle -->
<div
    x-data="{ value: false }"
    class="flex items-center justify-center"
    x-id="['toggle-label']"
>
    <input type="hidden" name="sendNotifications" :value="value">

    <!-- Label -->
    <label
        @click="$refs.toggle.click(); $refs.toggle.focus()"
        :id="$id('toggle-label')"
        class="text-gray-900"
    >
        Send notifications
    </label>

    <!-- Button -->
    <button
        x-ref="toggle"
        @click="value = ! value"
        type="button"
        role="switch"
        :aria-checked="value"
        :aria-labelledby="$id('toggle-label')"
        :class="value ? 'bg-gray-900 border-2 border-white' : 'bg-white border-2 border-gray-900'"
        class="relative ml-4 inline-flex w-14 rounded-full py-1 px-0"
    >
        <span
            :class="value ? 'bg-white translate-x-6' : 'bg-gray-900 translate-x-1'"
            class="h-6 w-6 rounded-full transition"
            aria-hidden="true"
        ></span>
    </button>
</div>

Sinnbeck

3 years ago

Level 102

@thebigk You are using class wrong here as well. Remove :

<div x-data="{ isLive : false }" class="flex items-center justify-between">

There is a difference between class which is just a regular html class, and :class which is a javascript expression to generate classes

Also just noticed that you have ! on the wrong side of the =

@click="isLive = ! isLive"

Working example: https://codesandbox.io/s/alpine-js-playground-forked-e9bs1z?file=/index.html

Please or to participate in this conversation.