Using x-bind for Class Binding

Alpine supports both String and Object for Class Binding. We can choose either one for our preference.

Version

Alpine 3.9

One Utility

String

class000

Alpine supports class binding for String.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="isActive ? 'text-red-600' : ''">
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive ? 'text-red-600' : ''">
  TailwindCSS
</div>

text-3xl : directly specify on class attribute. This utility is not changed by state
text-red-600 : determined by isActive state. We can simply use class binding with String

Unlike another attribute binding in Alpine, class binding will not override original text-3xl, just append new text-red-600 to class attribute

Object

class000

Alpine also supports class binding for Object.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="{ 'text-red-600': isActive }">
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="{ 'text-red-600': isActive }">
  TailwindCSS
</div>

text-3xl : directly specify on class attribute. This utility is not changed by state
text-red-600 : determined by isActive state. We can also use class binding with Object. Key is utility, and value is boolean which is state

Multiple Utilities

String

class001

Alpine supports class binding for String with multiple utilities.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="isActive ? 'text-red-600 font-bold' : ''">
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive ? 'text-red-600 font-bold' : ''">
  TailwindCSS
</div>

text-3xl : directly specify on class attribute. This utility is not changed by state
text-red-600 font-bold : determined by isActive state. We can simply use class binding with String returning multiple utilities

Object

class001

Alpine also support class binding for Object with multiple utilities.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div
      class="text-3xl"
      :class="{ 'text-red-600': isActive, 'font-bold': isActive }"
    >
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div
  class="text-3xl"
  :class="{ 'text-red-600': isActive, 'font-bold': isActive }"
>
  TailwindCSS
</div>

text-3xl : directly specify on class attribute. This utility is not changed by state
text-red-600 : determined by isActive state. We can also use class binding with Object. Multiple utilities are multiple keys, and values are booleans which are states

String Shorthand

?:

class000

Since Alpine supports class binding for String, we often use ?: in :class.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="isActive ? 'text-red-600' : ''">
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive ? 'text-red-600' : ''">
  TailwindCSS
</div>

text-red-600 : determined by isActive state. If isActive is true, return text-red-600 to apply this utility. If isActive is false, return empty String not to apply it

&&

class000

We can simply ?: to &&.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="isActive && 'text-red-600'">TailwindCSS</div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive && 'text-red-600'">TailwindCSS</div>

text-red-600 : determined by isActive state. If isActive is true, return text-red-600 to apply this utility. If isActive is false, return empty String not to apply it
Instead of using ?:, we can just use && to shorten the codebase

||

class000

We can simply ?: to ||.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: false }">
    <div class="text-3xl" :class="isActive || 'text-red-600'">TailwindCSS</div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive || 'text-red-600'">TailwindCSS</div>

text-red-600 : determined by isActive state. If isActive is true, return text-red-600 to apply this utility. If isActive is false, return an empty String not to apply it
Instead of using ?:, we can just use || to shorten the codebase

Ternary Operator

String

class002

Since Alpine supports class binding for String, we often use ?: in :class to select one of two utilities.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div class="text-3xl" :class="isActive ? 'text-blue-600' : 'text-red-600'">
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div class="text-3xl" :class="isActive ? 'text-blue-600' : 'text-red-600'">
  TailwindCSS
</div>

text-blue-600 or text-red-600 : determined by isActive state. If isActive is true, return text-blue-600 to apply this utility. If isActive is false, return text-red-600 to apply it.

Object

class002

Since Alpine supports class binding for Object, we can also use Object to implement ?:.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ isActive: true }">
    <div
      class="text-3xl"
      :class="{ 'text-blue-600': isActive, 'text-red-600': !isActive }"
    >
      TailwindCSS
    </div>
  </body>
</html>

Line 11

<div
  class="text-3xl"
  :class="{ 'text-blue-600': isActive, 'text-red-600': !isActive }"
>
  TailwindCSS
</div>

text-blue-600 : enable if isActive state is true
text-red-600 : enable if isActive state if false

Conclusion

Although Alpine is inspired by Vue, as for Class Binding, there are subtle differences between Vue and Alpine
Alpine doesn’t support class binding for Object Array, just use plain Array for multiple utilities

Reference

Alpine, x-bind