diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
index de9b6ba0f..52ad747ba 100644
--- a/dist/alpine-ie11.js
+++ b/dist/alpine-ie11.js
@@ -6022,13 +6022,13 @@
           _newArrowCheck(this, _this);
 
           if (value[classNames]) {
-            classNames.split(' ').forEach(function (className) {
+            classNames.split(' ').filter(Boolean).forEach(function (className) {
               _newArrowCheck(this, _this2);
 
               return el.classList.add(className);
             }.bind(this));
           } else {
-            classNames.split(' ').forEach(function (className) {
+            classNames.split(' ').filter(Boolean).forEach(function (className) {
               _newArrowCheck(this, _this2);
 
               return el.classList.remove(className);
@@ -6038,7 +6038,7 @@
       } else {
         var _originalClasses = el.__x_original_classes || [];
 
-        var newClasses = value.split(' ');
+        var newClasses = value.split(' ').filter(Boolean);
         el.setAttribute('class', arrayUnique(_originalClasses.concat(newClasses)).join(' '));
       }
     } else if (isBooleanAttr(attrName)) {
diff --git a/dist/alpine.js b/dist/alpine.js
index e54d2eba8..5050513da 100644
--- a/dist/alpine.js
+++ b/dist/alpine.js
@@ -577,14 +577,14 @@
         const keysSortedByBooleanValue = Object.keys(value).sort((a, b) => value[a] - value[b]);
         keysSortedByBooleanValue.forEach(classNames => {
           if (value[classNames]) {
-            classNames.split(' ').forEach(className => el.classList.add(className));
+            classNames.split(' ').filter(Boolean).forEach(className => el.classList.add(className));
           } else {
-            classNames.split(' ').forEach(className => el.classList.remove(className));
+            classNames.split(' ').filter(Boolean).forEach(className => el.classList.remove(className));
           }
         });
       } else {
         const originalClasses = el.__x_original_classes || [];
-        const newClasses = value.split(' ');
+        const newClasses = value.split(' ').filter(Boolean);
         el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '));
       }
     } else if (isBooleanAttr(attrName)) {
diff --git a/src/directives/bind.js b/src/directives/bind.js
index e7953522e..ee15b6556 100644
--- a/src/directives/bind.js
+++ b/src/directives/bind.js
@@ -65,14 +65,14 @@ export function handleAttributeBindingDirective(component, el, attrName, express
 
             keysSortedByBooleanValue.forEach(classNames => {
                 if (value[classNames]) {
-                    classNames.split(' ').forEach(className => el.classList.add(className))
+                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.add(className))
                 } else {
-                    classNames.split(' ').forEach(className => el.classList.remove(className))
+                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.remove(className))
                 }
             })
         } else {
             const originalClasses = el.__x_original_classes || []
-            const newClasses = value.split(' ')
+            const newClasses = value.split(' ').filter(Boolean)
             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
         }
     } else if (isBooleanAttr(attrName)) {
diff --git a/test/bind.spec.js b/test/bind.spec.js
index 9b7533b0c..6be7cdebe 100644
--- a/test/bind.spec.js
+++ b/test/bind.spec.js
@@ -420,3 +420,14 @@ test('setSelectionRange is not called for inapplicable input types', async () =>
         expect(document.querySelector('input').value).toEqual('baz')
     })
 })
+
+test('unnecessary whitespaces in class list are ignored', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ foo: 'bar' }">
+        <span x-bind:class="{'   foo:class ': foo === 'bar' }"></span>
+    </div>
+    `
+    Alpine.start()
+
+    expect(document.querySelector('span').classList.contains('foo:class')).toBeTruthy()
+})