diff --git a/packages/alpinejs/src/utils/classes.js b/packages/alpinejs/src/utils/classes.js
index 0fd02aa8a..69db66eda 100644
--- a/packages/alpinejs/src/utils/classes.js
+++ b/packages/alpinejs/src/utils/classes.js
@@ -11,10 +11,12 @@ export function setClasses(el, value) {
     return setClassesFromString(el, value)
 }
 
-function setClassesFromString(el, classString) {
-    let split = classString => classString.split(' ').filter(Boolean)
+function splitClasses(classString) {
+  return classString.split(/\s/).filter(Boolean)
+}
 
-    let missingClasses = classString => classString.split(' ').filter(i => ! el.classList.contains(i)).filter(Boolean)
+function setClassesFromString(el, classString) {
+    let missingClasses = classString => splitClasses(classString).filter(i => ! el.classList.contains(i)).filter(Boolean)
 
     let addClassesAndReturnUndo = classes => {
         el.classList.add(...classes)
@@ -29,10 +31,8 @@ function setClassesFromString(el, classString) {
 }
 
 function setClassesFromObject(el, classObject) {
-    let split = classString => classString.split(' ').filter(Boolean)
-
-    let forAdd = Object.entries(classObject).flatMap(([classString, bool]) => bool ? split(classString) : false).filter(Boolean)
-    let forRemove = Object.entries(classObject).flatMap(([classString, bool]) => ! bool ? split(classString) : false).filter(Boolean)
+    let forAdd = Object.entries(classObject).flatMap(([classString, bool]) => bool ? splitClasses(classString) : false).filter(Boolean)
+    let forRemove = Object.entries(classObject).flatMap(([classString, bool]) => ! bool ? splitClasses(classString) : false).filter(Boolean)
 
     let added = []
     let removed = []
diff --git a/tests/cypress/integration/directives/x-bind-class.spec.js b/tests/cypress/integration/directives/x-bind-class.spec.js
index 486a60b1a..e25ad3bba 100644
--- a/tests/cypress/integration/directives/x-bind-class.spec.js
+++ b/tests/cypress/integration/directives/x-bind-class.spec.js
@@ -82,13 +82,13 @@ test('classes are removed before being added',
     }
 )
 
-test('extra whitespace in class binding string syntax is ignored',
+test.only('extra whitespace in class binding string syntax is ignored',
     html`
         <div x-data>
-            <span x-bind:class="'  foo  bar  '"></span>
+            <span x-bind:class="'  foo  bar \n baz '"></span>
         </div>
     `,
-    ({ get }) => get('span').should(haveClasses(['foo', 'bar']))
+    ({ get }) => get('span').should(haveClasses(['foo', 'bar', 'baz']))
 )
 
 test('undefined class binding resolves to empty string',
diff --git a/tests/cypress/integration/directives/x-transition.spec.js b/tests/cypress/integration/directives/x-transition.spec.js
index 717d4ea7e..8e82d354f 100644
--- a/tests/cypress/integration/directives/x-transition.spec.js
+++ b/tests/cypress/integration/directives/x-transition.spec.js
@@ -81,6 +81,29 @@ test('transition:enter in nested x-show visually runs',
     }
 )
 
+test('extra whitespace in transition string syntax is ignored',
+  html`
+      <style>
+          .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+          .duration-100 { transition-duration: 100ms; }
+      </style>
+      <div x-data="{ show: false }">
+          <button x-on:click="show = ! show"></button>
+
+          <span
+              x-show="show"
+              x-transition:enter="transition  duration-100 \n  \n     some-class-on-newline-with-lotsa-whitespace "
+          >thing</span>
+      </div>
+  `,
+  ({ get }) => {
+      get('span').should(beHidden())
+      get('button').click()
+      get('span').should(beVisible())
+      get('span').should(haveClasses(['transition', 'duration-100', 'some-class-on-newline-with-lotsa-whitespace']))
+  }
+)
+
 test('transition duration and delay with and without ms syntax',
     html`
         <div x-data="{ showMs: false, showBlank: false }">