diff --git a/.storybook/components/ColorList/ColorList.tsx b/.storybook/components/ColorList/ColorList.tsx
index 7fbf2eb9c..f4ed67f99 100755
--- a/.storybook/components/ColorList/ColorList.tsx
+++ b/.storybook/components/ColorList/ColorList.tsx
@@ -16,7 +16,7 @@ export const ColorList = (props: Props) => (
   <div className="flex flex-col gap-4">
     {props.listItems.map(function (listItem) {
       return (
-        <div className="bg-neutral-default flex gap-4 p-4" key={listItem.name}>
+        <div className="flex gap-4 bg-neutral-default p-4" key={listItem.name}>
           <div className="flex w-80 flex-col gap-1">
             <label
               className={styles['color-list__label']}
diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
index a6b2d1113..cb9982ccf 100644
--- a/src/components/DragDrop/DragDrop.stories.tsx
+++ b/src/components/DragDrop/DragDrop.stories.tsx
@@ -82,7 +82,7 @@ export const Default: StoryObj<Args> = {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
           <DragDrop.ContainerHeader>
-            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
+            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
@@ -289,7 +289,7 @@ export const Default: StoryObj<Args> = {
         ),
         header: (
           <DragDrop.ContainerHeader>
-            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
+            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
@@ -356,7 +356,7 @@ export const HoveredHandle: StoryObj<Args> = {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
           <DragDrop.ContainerHeader>
-            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
+            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
@@ -483,7 +483,7 @@ export const HoveredHandle: StoryObj<Args> = {
         ),
         header: (
           <DragDrop.ContainerHeader>
-            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
+            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
@@ -511,7 +511,7 @@ const InteractiveDragDrop = () => {
       itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
       header: (
         <DragDrop.ContainerHeader>
-          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Available projects
             </Heading>
@@ -532,7 +532,7 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDrop.ContainerHeader>
-          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
             </Heading>
@@ -553,7 +553,7 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDrop.ContainerHeader>
-          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
             </Heading>
@@ -574,7 +574,7 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDrop.ContainerHeader>
-          <div className="bg-neutral-subtle mb-4 flex items-center gap-4 p-0">
+          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle p-0">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
             </Heading>
diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
index 7f8fb1d7e..3aa23485c 100644
--- a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
+++ b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
@@ -17,7 +17,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
+            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -243,7 +243,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
+            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -474,7 +474,7 @@ exports[`<DragDrop /> HoveredHandle story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
+            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -700,7 +700,7 @@ exports[`<DragDrop /> HoveredHandle story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
+            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -871,7 +871,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle mb-4 flex items-center gap-4"
+            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
           >
             <h2
               class="heading heading--size-title-sm heading--neutral-strong"
@@ -1119,7 +1119,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle mb-4 flex items-center gap-4"
+            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
           >
             <h2
               class="heading heading--size-title-sm heading--neutral-strong"
@@ -1166,7 +1166,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle mb-4 flex items-center gap-4"
+            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
           >
             <h2
               class="heading heading--size-title-sm heading--neutral-strong"
@@ -1213,7 +1213,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="bg-neutral-subtle mb-4 flex items-center gap-4 p-0"
+            class="mb-4 flex items-center gap-4 bg-neutral-subtle p-0"
           >
             <h2
               class="heading heading--size-title-sm heading--neutral-strong"
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 4df3fddfc..34ba1cd76 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -337,7 +337,7 @@ export const WithVisualLabel: StoryObj<Args> = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="text-h1 w-1/2 py-4 text-center">
+          <div className="w-1/2 py-4 text-center text-h1">
             {moodData.map((mood) => {
               return (
                 sliderValue === mood.value && (
@@ -380,7 +380,7 @@ export const WithMultipleVisualLabels: StoryObj<Args> = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="text-h1 flex w-1/2 justify-between py-4 text-center">
+          <div className="flex w-1/2 justify-between py-4 text-center text-h1">
             {moodData.map((mood, index) => {
               return (
                 <div
diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
index 0411cb871..57ed4f09b 100644
--- a/src/components/Slider/__snapshots__/Slider.test.tsx.snap
+++ b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -610,7 +610,7 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
          
       </label>
       <div
-        class="text-h1 flex w-1/2 justify-between py-4 text-center"
+        class="flex w-1/2 justify-between py-4 text-center text-h1"
       >
         <div
           class=""
@@ -708,7 +708,7 @@ exports[`<Slider /> WithVisualLabel story renders snapshot 1`] = `
          
       </label>
       <div
-        class="text-h1 w-1/2 py-4 text-center"
+        class="w-1/2 py-4 text-center text-h1"
       >
         <span>
           😐