From 8385c20a6ba1c48d559f5e86ebfb76763efd89e2 Mon Sep 17 00:00:00 2001
From: "Arvin.Atienza" <a.atienza@prostrive.io>
Date: Mon, 1 May 2023 17:41:49 +0800
Subject: [PATCH] chore: Use tailwind instead of inline styles ( WIP )

---
 .../accordion/examples/Default.vue            |  2 +-
 .../ui-elements/accordion/examples/Flat.vue   |  4 +--
 .../ui-elements/accordion/examples/Inset.vue  |  2 +-
 .../ui-elements/accordion/examples/Menu.vue   |  4 +--
 .../accordion/examples/Multiple.vue           |  2 +-
 .../ui-elements/accordion/examples/Popout.vue |  2 +-
 .../ui-elements/affix/examples/Bottom.vue     |  2 +-
 .../ui-elements/affix/examples/Default.vue    |  7 ++---
 .../ui-elements/affix/examples/Top.vue        |  2 +-
 .../ui-elements/app-bar/examples/Color.vue    |  5 ++--
 .../ui-elements/app-bar/examples/Default.vue  |  2 +-
 .../ui-elements/app-bar/examples/Hide.vue     | 13 ++------
 .../ui-elements/app-bar/examples/Shadow.vue   | 13 ++------
 .../badge/examples/WithOtherComponents.vue    |  2 +-
 .../ui-elements/breadcrumbs/examples/Item.vue |  3 +-
 .../button-dropdown/examples/Default.vue      |  2 +-
 .../ui-elements/button/examples/Behavior.vue  |  2 +-
 .../button/examples/WithOutline.vue           |  2 +-
 .../ui-elements/card/examples/Horizontal.vue  |  8 ++---
 .../ui-elements/card/examples/Image.vue       |  2 +-
 .../ui-elements/collapse/examples/Color.vue   | 10 +++----
 .../ui-elements/collapse/examples/Default.vue |  2 +-
 .../ui-elements/collapse/examples/Flat.vue    |  4 +--
 .../ui-elements/collapse/examples/Icon.vue    |  2 +-
 .../ui-elements/collapse/examples/Solid.vue   |  2 +-
 .../data-table/examples/Sticky.vue            |  2 +-
 .../date-input/examples/validation.vue        |  2 +-
 .../ui-elements/dropdown/examples/Cursor.vue  |  2 +-
 .../dropdown/examples/PlacementAndOffset.vue  |  6 ++--
 .../dropdown/examples/PreventOverflow.vue     | 30 ++-----------------
 .../ui-elements/file-upload/examples/Undo.vue |  2 +-
 .../infinite-scroll/examples/CustomTarget.vue |  3 +-
 .../infinite-scroll/examples/Default.vue      |  2 +-
 .../infinite-scroll/examples/Disabled.vue     |  3 +-
 .../infinite-scroll/examples/Reverse.vue      |  3 +-
 .../ui-elements/input/examples/Default.vue    |  2 +-
 .../input/examples/ExtendedDefault.vue        |  4 +--
 .../ui-elements/input/examples/Hint.vue       |  2 +-
 .../ui-elements/input/examples/Mask.vue       |  5 ++--
 .../ui-elements/input/examples/Slots.vue      |  2 +-
 .../ui-elements/input/examples/Styles.vue     |  2 +-
 .../ui-elements/input/examples/Textarea.vue   |  2 +-
 .../ui-elements/input/examples/Validate.vue   |  2 +-
 .../ui-elements/navbar/examples/Height.vue    |  2 +-
 .../scroll-container/examples/Color.vue       |  6 ++--
 .../scroll-container/examples/Horizontal.vue  |  4 +--
 .../scroll-container/examples/Size.vue        | 14 ++++-----
 .../select/examples/AllowCreate.vue           |  2 +-
 .../select/examples/Decorators.vue            |  2 +-
 .../ui-elements/select/examples/Default.vue   |  2 +-
 .../select/examples/MaxVisibleOptions.vue     |  2 +-
 .../select/examples/ObjectOptions.vue         |  2 +-
 .../select/examples/Searchable.vue            |  2 +-
 .../select/examples/SelectedTopShown.vue      |  2 +-
 .../ui-elements/select/examples/Slots.vue     |  2 +-
 .../ui-elements/select/examples/State.vue     |  2 +-
 .../ui-elements/select/examples/Styles.vue    |  2 +-
 .../ui-elements/select/examples/Tagging.vue   |  2 +-
 .../ui-elements/select/examples/TrackBy.vue   |  2 +-
 .../select/examples/Validation.vue            |  2 +-
 .../select/examples/Variations.vue            |  2 +-
 .../ui-elements/sidebar/examples/VModel.vue   |  2 +-
 .../slider/components/Playground.vue          |  2 +-
 .../ui-elements/slider/examples/Slots.vue     |  6 ++--
 .../ui-elements/slider/examples/Vertical.vue  |  3 +-
 .../ui-elements/split/examples/Snapping.vue   |  3 +-
 .../ui-elements/tabs/examples/Color.vue       |  2 +-
 .../ui-elements/tabs/examples/Pagination.vue  |  2 +-
 .../toast/examples/ExampleComponent.vue       |  2 +-
 .../examples/CustomizableContent.vue          |  6 ++--
 .../tree-view/examples/Filters.vue            |  3 +-
 71 files changed, 107 insertions(+), 155 deletions(-)

diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Default.vue b/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
index 0ae4efdcf3b..7705e45c483 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(collapse, index) in collapses"
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue b/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
index 747cd5973b8..c3ad191b368 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(item, idx) in items"
@@ -11,7 +11,7 @@
       color="textInverted"
       flat
     >
-      <div style="padding: 0 1rem 0.75rem;">
+      <div class="pt-0 px-4 pb-3">
         {{ item.description }}
       </div>
     </va-collapse>
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue b/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
index d6dd61253db..1d294814e4f 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     inset
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue b/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
index 9c7cc9b59ee..7c3f7be5dfa 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(group, idx) in items"
@@ -11,7 +11,7 @@
       color="textInverted"
       flat
     >
-      <div style="padding: 0 1rem 0.75rem;">
+      <div class="pt-0 px-4 pb-3">
         <router-link
           v-for="(navItem, idx) in group.items"
           :key="idx"
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue b/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
index 14fc4159a11..247e6a9e942 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     multiple
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue b/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
index 819b6ff5177..38ebca416dd 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     popout
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue b/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
index f56f17906f5..e34e3742c2a 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
@@ -1,7 +1,7 @@
 <template>
   <va-affix :offset-bottom="50">
     <div
-      style="padding: 10px 30px; background-color: var(--va-background-element);"
+      class="py-2.5 px-8 bg-[var(--va-background-element)]"
     >
       Fixed at the bottom: 50
     </div>
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Default.vue b/packages/docs/page-config/ui-elements/affix/examples/Default.vue
index a586d100ee0..572600f8954 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="target"
-    style="height: 300px; overflow-y: scroll;"
+    class="h-72 overflow-y-scroll"
   >
     <p>
       {{ text }}
@@ -12,10 +12,7 @@
       :target="() => $refs.target"
     >
       <div
-        style="
-padding: 10px 30px;
-background-color: var(--va-background-element);
-"
+        class="py-2.5 px-8 bg-[var(--va-background-element)]"
       >
         Custom target: top 30, bottom 0.
       </div>
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Top.vue b/packages/docs/page-config/ui-elements/affix/examples/Top.vue
index e96b961ee2a..b6b112b92b0 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Top.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Top.vue
@@ -1,7 +1,7 @@
 <template>
   <va-affix :offset-top="100">
     <div
-      style="padding: 10px 30px; background-color: var(--va-background-element);"
+      class="py-2.5 px-8 bg-[var(--va-background-element)]"
     >
       Fixed at the top: 100
     </div>
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
index a40b1ddbee1..9b22f5169d0 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative;">
+  <div class="relative">
     <va-app-bar color="danger">
       <va-button
         icon="home"
@@ -35,8 +35,7 @@
   </div>
 
   <div
-    class="mt-2"
-    style="position: relative;"
+    class="mt-2 relative"
   >
     <va-app-bar
       color="info"
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
index 3f2fd769c5b..25db5e7e832 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative;">
+  <div class="relative">
     <va-app-bar>
       <va-button
         icon="home"
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
index 72f6a1b0ac2..ac6d51c67fd 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="relative max-h-32 border border-solid border-black overflow-hidden flex flex-col"
+  >
     <va-app-bar
       absolute
       hide-on-scroll
@@ -42,15 +44,6 @@
 </template>
 
 <style scope>
-.wrapper {
-  position: relative;
-  max-height: 120px;
-  border: 1px solid black;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 #va-app-bar-hide {
   background: var(--va-background-primary);
   padding-bottom: 500px;
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
index 3d7c5782f02..7f6c0023aa2 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="relative max-h-32 border border-solid border-black overflow-hidden flex flex-col"
+  >
     <va-app-bar
       shadow-on-scroll
       color="background-tertiary"
@@ -45,15 +47,6 @@
 </template>
 
 <style scope>
-.wrapper {
-  position: relative;
-  max-height: 120px;
-  border: 1px solid black;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 #va-app-bar-shadow {
   padding-bottom: 500px;
   overflow: auto;
diff --git a/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue b/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
index 9f4810426b1..94f5becf43b 100644
--- a/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
+++ b/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-badge
       class="mr-6"
       text="New"
diff --git a/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue b/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
index 30c694fd73b..d272211d23d 100644
--- a/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
+++ b/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
@@ -12,7 +12,8 @@
     />
     <va-breadcrumbs-item label="Four" />
     <va-breadcrumbs-item label="Five">
-      <span style="font-style: italic; color: var(--va-danger);">Slotted content</span>
+      <span class="italic text-[var(--va-danger)]">
+        Slotted content</span>
     </va-breadcrumbs-item>
   </va-breadcrumbs>
 </template>
diff --git a/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue b/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
index f0ade930692..2aad84cb30a 100644
--- a/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button-dropdown
       label="label"
       class="mr-2 mb-2"
diff --git a/packages/docs/page-config/ui-elements/button/examples/Behavior.vue b/packages/docs/page-config/ui-elements/button/examples/Behavior.vue
index ed915062064..3c152dd76c9 100644
--- a/packages/docs/page-config/ui-elements/button/examples/Behavior.vue
+++ b/packages/docs/page-config/ui-elements/button/examples/Behavior.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button
       class="mr-6 mb-2"
       preset="secondary"
diff --git a/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue b/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue
index d4b44b4f65d..d1ecbb2a4e6 100644
--- a/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue
+++ b/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button
       preset="secondary"
       border-color="primary"
diff --git a/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue b/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
index 39165745978..f91c6c417d5 100644
--- a/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
+++ b/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
@@ -5,14 +5,14 @@
         class="flex-nowrap"
         horizontal
       >
-        <div style="flex: auto;">
+        <div class="flex-auto">
           <va-card-title>Title</va-card-title>
           <va-card-content>
             {{ lorem }}
           </va-card-content>
         </div>
         <va-image
-          style="flex: 0 0 200px;"
+          class="flex-grow-0 flex-shrink-0 basis-52"
           src="https://picsum.photos/200"
         />
       </va-card-block>
@@ -20,11 +20,11 @@
 
     <va-card>
       <va-card-block horizontal>
-        <va-card-block style="flex: auto;">
+        <va-card-block class="flex-auto">
           <va-card-content>{{ lorem }}</va-card-content>
         </va-card-block>
         <va-divider vertical />
-        <va-card-block style="flex: auto;">
+        <va-card-block class="flex-auto">
           <va-card-content>{{ lorem }}</va-card-content>
         </va-card-block>
       </va-card-block>
diff --git a/packages/docs/page-config/ui-elements/card/examples/Image.vue b/packages/docs/page-config/ui-elements/card/examples/Image.vue
index 2842f29f57f..688e601081f 100644
--- a/packages/docs/page-config/ui-elements/card/examples/Image.vue
+++ b/packages/docs/page-config/ui-elements/card/examples/Image.vue
@@ -2,7 +2,7 @@
   <va-card>
     <va-image
       src="https://picsum.photos/400/200"
-      style="height: 200px;"
+      class="h-52"
     />
     <va-card-title>Title</va-card-title>
     <va-card-content>
diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Color.vue b/packages/docs/page-config/ui-elements/collapse/examples/Color.vue
index fa399afacab..a07467334d2 100644
--- a/packages/docs/page-config/ui-elements/collapse/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/collapse/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 400px;">
+  <div class="w-96">
     <va-collapse
       v-model="value[0]"
       header="Collapse header"
@@ -7,7 +7,7 @@
       color="success"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -18,7 +18,7 @@
       color="secondary"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -30,7 +30,7 @@
       color-all
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -44,7 +44,7 @@
       icon="info"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Default.vue b/packages/docs/page-config/ui-elements/collapse/examples/Default.vue
index 2597e700f8e..5c5cb111114 100644
--- a/packages/docs/page-config/ui-elements/collapse/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/collapse/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
   >
     <div>Collapse content</div>
diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue b/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue
index 43dd8cae554..f9ca2aac7a6 100644
--- a/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue
+++ b/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue
@@ -4,9 +4,9 @@
     text-color="textPrimary"
     color="textInverted"
     flat
-    style="width: 400px;"
+    class="w-96"
   >
-    <div style="padding: 0 1rem 0.75rem;">
+    <div class="pt-0 px-4 pb-3">
       Collapse content
     </div>
   </va-collapse>
diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue b/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue
index 1b1d9f6d96e..5c78c775f95 100644
--- a/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue
+++ b/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
     icon="home"
   >
diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue b/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue
index 6606d8f0301..562ce3184d4 100644
--- a/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue
+++ b/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
     solid
   >
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue b/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
index d0e2fd98122..297b5909311 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
@@ -73,7 +73,7 @@
           <td colspan="6">
             <va-inner-loading
               :loading="isLoading"
-              style="height: 2rem;"
+              class="h-8"
             />
           </td>
         </tr>
diff --git a/packages/docs/page-config/ui-elements/date-input/examples/validation.vue b/packages/docs/page-config/ui-elements/date-input/examples/validation.vue
index dce41013b0d..d90746b5ce8 100644
--- a/packages/docs/page-config/ui-elements/date-input/examples/validation.vue
+++ b/packages/docs/page-config/ui-elements/date-input/examples/validation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: flex-start;">
+  <div class="flex items-start">
     <va-date-input
       v-model="value"
       class="mr-6"
diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
index 3ea49990ab1..ddd514e7166 100644
--- a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
+++ b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
@@ -10,7 +10,7 @@
 
     <template #anchor>
       <va-image
-        style="height: 300px; width: 300px;"
+        class="h-[300px] w-[300px]"
         src="https://picsum.photos/1500"
       >
         <va-badge text="Right click this image" />
diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
index 0624a68ab10..d9c69e4d6c2 100644
--- a/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
+++ b/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
@@ -10,7 +10,7 @@
     <tr>
       <td
         colspan="2"
-        style="padding: 4rem;"
+        class="p-[4rem]"
       >
         <div class="flex flex-col items-center">
           <va-dropdown
@@ -40,7 +40,7 @@
       </td>
     </tr>
     <tr>
-      <td style="color: var(--va-primary);">
+      <td class="text-[var(--va-primary)]">
         Main:
       </td>
       <td>
@@ -51,7 +51,7 @@
       </td>
     </tr>
     <tr>
-      <td style="color: var(--va-secondary);">
+      <td class="text-[var(--va-secondary)]">
         Cross:
       </td>
       <td>
diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue
index 67644f4396e..fe0db3d2244 100644
--- a/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue
+++ b/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue
@@ -1,11 +1,9 @@
 <template>
   <div
-    class="demo-viewport"
-    style="overflow: hidden;"
+    class="overflow-hidden relative p-16 border-2 border-solid border-[var(--va-danger)]"
   >
     <div
-      class="demo-ignore-overflow"
-      style="overflow: hidden;"
+      class="overflow-hidden p-16 border-2 border-solid border-[var(--va-success)]"
     >
       <va-dropdown
         :model-value="true"
@@ -15,7 +13,7 @@
         target=".demo-viewport"
         prevent-overflow
       >
-        <div class="demo-square" />
+        <div class="h-screen w-24 bg-[var(--va-primary)]" />
 
         <template #anchor>
           <button>Anchor</button>
@@ -24,25 +22,3 @@
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.demo-square {
-  background-color: var(--va-primary);
-  width: 100px;
-  height: 100vh;
-}
-
-.demo-viewport {
-  overflow: hidden;
-  position: relative;
-  padding: 4rem;
-  border: 2px solid var(--va-danger);
-}
-
-.demo-ignore-overflow {
-  padding: 4rem;
-  overflow: hidden;
-  position: relative;
-  border: 2px solid var(--va-success);
-}
-</style>
diff --git a/packages/docs/page-config/ui-elements/file-upload/examples/Undo.vue b/packages/docs/page-config/ui-elements/file-upload/examples/Undo.vue
index 88093858c6c..9d540fa92bd 100644
--- a/packages/docs/page-config/ui-elements/file-upload/examples/Undo.vue
+++ b/packages/docs/page-config/ui-elements/file-upload/examples/Undo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 300px;">
+  <div class="w-80">
     <va-switch
       v-model="isGalleryViewEnabled"
       :label="$t('fileUpload.examples.undo.galleryViewLabel')"
diff --git a/packages/docs/page-config/ui-elements/infinite-scroll/examples/CustomTarget.vue b/packages/docs/page-config/ui-elements/infinite-scroll/examples/CustomTarget.vue
index f936ca55003..0e6dd041368 100644
--- a/packages/docs/page-config/ui-elements/infinite-scroll/examples/CustomTarget.vue
+++ b/packages/docs/page-config/ui-elements/infinite-scroll/examples/CustomTarget.vue
@@ -2,8 +2,7 @@
   <div class="row">
     <div
       ref="infiniteScrollTarget"
-      style="height: 200px;"
-      class="flex flex-col md6 lg4"
+      class="flex flex-col md6 lg4 h-48"
     >
       <va-infinite-scroll
         :load="appendRecordsAsyncRef"
diff --git a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Default.vue b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Default.vue
index 6ae2f922af4..accc6e05133 100644
--- a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Default.vue
@@ -2,7 +2,7 @@
   <div class="row">
     <div
       style="height: 200px;"
-      class="flex flex-col md6 lg4"
+      class="flex flex-col md6 lg4 h-48"
     >
       <va-infinite-scroll :load="appendRecordsAsync">
         <div
diff --git a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Disabled.vue b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Disabled.vue
index 6c2065e173b..5399a32cdae 100644
--- a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Disabled.vue
+++ b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Disabled.vue
@@ -8,8 +8,7 @@
 
   <div class="row">
     <div
-      style="height: 200px;"
-      class="flex flex-col md6 lg4"
+      class="flex flex-col md6 lg4 h-48"
     >
       <va-infinite-scroll
         :load="appendRecordsAsync"
diff --git a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Reverse.vue b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Reverse.vue
index 94d33b83ab1..5b7e228d22f 100644
--- a/packages/docs/page-config/ui-elements/infinite-scroll/examples/Reverse.vue
+++ b/packages/docs/page-config/ui-elements/infinite-scroll/examples/Reverse.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="row">
     <div
-      style="height: 200px;"
-      class="flex flex-col md6 lg4"
+      class="flex flex-col md6 lg4 h-48"
     >
       <va-infinite-scroll
         :load="appendRecordsAsync"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Default.vue b/packages/docs/page-config/ui-elements/input/examples/Default.vue
index ccb03cf38d0..0e53b3b5393 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/input/examples/ExtendedDefault.vue b/packages/docs/page-config/ui-elements/input/examples/ExtendedDefault.vue
index 6ee6e51235a..8b59f93f6fd 100644
--- a/packages/docs/page-config/ui-elements/input/examples/ExtendedDefault.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/ExtendedDefault.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
@@ -47,7 +47,7 @@
     >
       <template #counter="{ valueLength, maxLength }">
         <b
-          style="margin-left: auto;"
+          class="ml-auto"
           :style="{
             color:
               valueLength > maxLength
diff --git a/packages/docs/page-config/ui-elements/input/examples/Hint.vue b/packages/docs/page-config/ui-elements/input/examples/Hint.vue
index 1e0313fd78d..77b01ca5dad 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Hint.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Hint.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Mask.vue b/packages/docs/page-config/ui-elements/input/examples/Mask.vue
index a6d88fbe44f..6a433dd02ea 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Mask.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Mask.vue
@@ -1,9 +1,8 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="maskCreditCardValue"
-      class="mb-6"
-      :style="{ paddingTop: '4px' }"
+      class="mb-6 pt-1"
       label="Credit card mask"
       type="input"
       mask="creditCard"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Slots.vue b/packages/docs/page-config/ui-elements/input/examples/Slots.vue
index 21741f7efc9..a6b94000f9c 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Slots.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Slots.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Styles.vue b/packages/docs/page-config/ui-elements/input/examples/Styles.vue
index 5ab821ddbfa..f00d72f5d50 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Styles.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Styles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Textarea.vue b/packages/docs/page-config/ui-elements/input/examples/Textarea.vue
index 433579fa120..a998986526d 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Textarea.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Textarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/input/examples/Validate.vue b/packages/docs/page-config/ui-elements/input/examples/Validate.vue
index ae4b69b4b89..dcb58cd247f 100644
--- a/packages/docs/page-config/ui-elements/input/examples/Validate.vue
+++ b/packages/docs/page-config/ui-elements/input/examples/Validate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-input
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/navbar/examples/Height.vue b/packages/docs/page-config/ui-elements/navbar/examples/Height.vue
index 03accc33c70..cac79714b82 100644
--- a/packages/docs/page-config/ui-elements/navbar/examples/Height.vue
+++ b/packages/docs/page-config/ui-elements/navbar/examples/Height.vue
@@ -1,7 +1,7 @@
 <template>
   <va-navbar
     color="#282F69"
-    style="height: 100px;"
+    class="h-24"
   >
     <template #left>
       <va-navbar-item class="logo">
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Color.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Color.vue
index 9d655f140e6..4fbad0c9b12 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Color.vue
@@ -1,6 +1,6 @@
 <template>
   <va-scroll-container
-    style="max-height: 200px;"
+    class="max-h-[200px]"
     :color="currentColor"
     vertical
   >
@@ -8,11 +8,11 @@
       <va-list-item
         v-for="color in colorsArray"
         :key="color.name"
-        style="display: flex; cursor: pointer;"
+        class="flex cursor-pointer"
         @click="currentColor = color.name"
       >
         <va-color-indicator
-          style="margin-right: 0.5rem;"
+          class="mr-2"
           :color="color.name"
         />
         {{ color.title }}
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Horizontal.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Horizontal.vue
index 84028db671a..5c2c9838beb 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Horizontal.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Horizontal.vue
@@ -1,10 +1,10 @@
 <template>
   <va-scroll-container
     color="warning"
-    style="max-height: 400px;"
+    class="max-h-[400px]"
     horizontal
   >
-    <div style="min-width: 1200px; max-height: 400px;">
+    <div class="min-w-[1200px] max-h-[400px]">
       <img
         src="https://picsum.photos/2000/400"
         alt=""
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Size.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Size.vue
index 32f7ae8e7fd..258ab12b72b 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Size.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Size.vue
@@ -1,29 +1,29 @@
 <template>
-  <div style="display: flex;">
+  <div class="flex">
     <va-scroll-container
       vertical
       size="small"
-      style="width: 33%; max-height: 200px;"
+      class="w-1/3 max-h-[200px]"
     >
-      <div style="padding: 1rem;">
+      <div class="p-4">
         {{ lorem }}
       </div>
     </va-scroll-container>
     <va-scroll-container
       vertical
       size="medium"
-      style="margin: 0 1rem; width: 33%; max-height: 200px;"
+      class="m-0 w-1/3 max-h-[200px]"
     >
-      <div style="padding: 1rem;">
+      <div class="p-4">
         {{ lorem }}
       </div>
     </va-scroll-container>
     <va-scroll-container
       vertical
       size="large"
-      style="width: 33%; max-height: 200px;"
+      class="w-1/3 max-h-[200px]"
     >
-      <div style="padding: 1rem;">
+      <div class="p-4">
         {{ lorem }}
       </div>
     </va-scroll-container>
diff --git a/packages/docs/page-config/ui-elements/select/examples/AllowCreate.vue b/packages/docs/page-config/ui-elements/select/examples/AllowCreate.vue
index 76922cdf23c..0a3134a16f0 100644
--- a/packages/docs/page-config/ui-elements/select/examples/AllowCreate.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/AllowCreate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Decorators.vue b/packages/docs/page-config/ui-elements/select/examples/Decorators.vue
index d2ee628a6a3..eb8fd38f03f 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Decorators.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Decorators.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Default.vue b/packages/docs/page-config/ui-elements/select/examples/Default.vue
index 45d386ee97e..10889990f27 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       :options="options"
diff --git a/packages/docs/page-config/ui-elements/select/examples/MaxVisibleOptions.vue b/packages/docs/page-config/ui-elements/select/examples/MaxVisibleOptions.vue
index 7750ab23dac..05b8b387f2a 100644
--- a/packages/docs/page-config/ui-elements/select/examples/MaxVisibleOptions.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/MaxVisibleOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       :options="options"
diff --git a/packages/docs/page-config/ui-elements/select/examples/ObjectOptions.vue b/packages/docs/page-config/ui-elements/select/examples/ObjectOptions.vue
index c07d4bd2cdf..414632ee5ab 100644
--- a/packages/docs/page-config/ui-elements/select/examples/ObjectOptions.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/ObjectOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Searchable.vue b/packages/docs/page-config/ui-elements/select/examples/Searchable.vue
index 0d1fa99d766..4709518af84 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Searchable.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Searchable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       label="Searchable multi select"
diff --git a/packages/docs/page-config/ui-elements/select/examples/SelectedTopShown.vue b/packages/docs/page-config/ui-elements/select/examples/SelectedTopShown.vue
index c0adff63086..b08dd06773b 100644
--- a/packages/docs/page-config/ui-elements/select/examples/SelectedTopShown.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/SelectedTopShown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       :options="options"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Slots.vue b/packages/docs/page-config/ui-elements/select/examples/Slots.vue
index c955bbccaa2..0a700b15481 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Slots.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Slots.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/State.vue b/packages/docs/page-config/ui-elements/select/examples/State.vue
index cb1ca2edb44..cc3098c9054 100644
--- a/packages/docs/page-config/ui-elements/select/examples/State.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/State.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Styles.vue b/packages/docs/page-config/ui-elements/select/examples/Styles.vue
index fd5d641eced..7443aca76a6 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Styles.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Styles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Tagging.vue b/packages/docs/page-config/ui-elements/select/examples/Tagging.vue
index 4ec01fc2b7f..b23ff525adf 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Tagging.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Tagging.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/TrackBy.vue b/packages/docs/page-config/ui-elements/select/examples/TrackBy.vue
index 6ee5d6d2f81..c1b5070bf49 100644
--- a/packages/docs/page-config/ui-elements/select/examples/TrackBy.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/TrackBy.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Validation.vue b/packages/docs/page-config/ui-elements/select/examples/Validation.vue
index 5eb938b3c71..09fd5f5ad6f 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Validation.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Validation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="value"
       label="Exactly 2 options should be selected"
diff --git a/packages/docs/page-config/ui-elements/select/examples/Variations.vue b/packages/docs/page-config/ui-elements/select/examples/Variations.vue
index 37939e401f8..d87f713e3b6 100644
--- a/packages/docs/page-config/ui-elements/select/examples/Variations.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/Variations.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-xs">
     <va-select
       v-model="valueSingle"
       class="mb-6"
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/VModel.vue b/packages/docs/page-config/ui-elements/sidebar/examples/VModel.vue
index e3245aaecbc..0ebda7b046f 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/VModel.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/VModel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar v-model="enabled">
       <va-sidebar-item
         v-for="item in items"
diff --git a/packages/docs/page-config/ui-elements/slider/components/Playground.vue b/packages/docs/page-config/ui-elements/slider/components/Playground.vue
index 51b0123a265..2ffc5d1f2e3 100644
--- a/packages/docs/page-config/ui-elements/slider/components/Playground.vue
+++ b/packages/docs/page-config/ui-elements/slider/components/Playground.vue
@@ -8,7 +8,7 @@
     <VaSlider
       v-model="value"
       v-bind="bind"
-      style="width: 200px; height: 200px;"
+      class="h-[200px] w-[200px]"
     >
       <template
         v-for="slot in slots"
diff --git a/packages/docs/page-config/ui-elements/slider/examples/Slots.vue b/packages/docs/page-config/ui-elements/slider/examples/Slots.vue
index 1ac2c4a6697..c66588ed8a2 100644
--- a/packages/docs/page-config/ui-elements/slider/examples/Slots.vue
+++ b/packages/docs/page-config/ui-elements/slider/examples/Slots.vue
@@ -3,7 +3,7 @@
     <template #prepend>
       <va-input
         v-model.number="value1"
-        style="width: 70px;"
+        class="w-[70px]"
         type="number"
       />
     </template>
@@ -12,14 +12,14 @@
     <template #append>
       <va-input
         v-model.number="value2"
-        style="width: 70px;"
+        class="w-[70px]"
         type="number"
       />
     </template>
   </va-slider>
   <va-slider v-model="value3">
     <template #label>
-      <div style="font-style: italic; color: black;">
+      <div class="italic text-black">
         LABEL SLOT
       </div>
     </template>
diff --git a/packages/docs/page-config/ui-elements/slider/examples/Vertical.vue b/packages/docs/page-config/ui-elements/slider/examples/Vertical.vue
index cf1a3dec3a2..83b08baed46 100644
--- a/packages/docs/page-config/ui-elements/slider/examples/Vertical.vue
+++ b/packages/docs/page-config/ui-elements/slider/examples/Vertical.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="flex flex-wrap justify-center"
-    style="height: 200px;"
+    class="flex flex-wrap justify-center h-48"
   >
     <va-slider
       v-model="value"
diff --git a/packages/docs/page-config/ui-elements/split/examples/Snapping.vue b/packages/docs/page-config/ui-elements/split/examples/Snapping.vue
index f9654833fe3..56163aabbd1 100644
--- a/packages/docs/page-config/ui-elements/split/examples/Snapping.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/Snapping.vue
@@ -1,9 +1,8 @@
 <template>
   <va-split
-    class="split-demo"
+    class="split-demo h-[22-rem]"
     :snapping="[20, 80]"
     :snapping-range="5"
-    style="height: 22rem;"
   >
     <template #start>
       <div class="p-6">
diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Color.vue b/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
index 563a3f38587..21bf3783ee1 100644
--- a/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 280px;">
+  <div class="w-[280px]">
     <va-tabs
       v-model="value"
       color="danger"
diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue b/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
index 081c11b3fe5..9df65467232 100644
--- a/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
+++ b/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <va-tabs
     v-model="value"
-    style="width: 280px;"
+    class="w-[280px]"
   >
     <template #tabs>
       <va-tab
diff --git a/packages/docs/page-config/ui-elements/toast/examples/ExampleComponent.vue b/packages/docs/page-config/ui-elements/toast/examples/ExampleComponent.vue
index 6c13d695b42..9f018a88515 100644
--- a/packages/docs/page-config/ui-elements/toast/examples/ExampleComponent.vue
+++ b/packages/docs/page-config/ui-elements/toast/examples/ExampleComponent.vue
@@ -4,7 +4,7 @@
     name="clock"
     color="danger"
   />
-  <span style="font-weight: bold;">Bold message with icon</span>
+  <span class="bold">Bold message with icon</span>
 </template>
 
 <script>
diff --git a/packages/docs/page-config/ui-elements/tree-view/examples/CustomizableContent.vue b/packages/docs/page-config/ui-elements/tree-view/examples/CustomizableContent.vue
index c019d6e5f0b..1cccd285615 100644
--- a/packages/docs/page-config/ui-elements/tree-view/examples/CustomizableContent.vue
+++ b/packages/docs/page-config/ui-elements/tree-view/examples/CustomizableContent.vue
@@ -8,10 +8,10 @@
         <va-avatar
           v-if="node.image"
           :src="node.image"
-          style="margin-right: 0.5rem;"
+          class="mr-2"
         />
 
-        <div style="margin-right: 0.5rem;">
+        <div class="mr-2">
           <b
             v-if="node.label"
             class="display-6"
@@ -29,7 +29,7 @@
           preset="secondary"
           icon="add"
           size="small"
-          style="margin-left: auto;"
+          class="ml-auto"
         />
       </div>
     </template>
diff --git a/packages/docs/page-config/ui-elements/tree-view/examples/Filters.vue b/packages/docs/page-config/ui-elements/tree-view/examples/Filters.vue
index 3769e29ae64..5bb3ca67268 100644
--- a/packages/docs/page-config/ui-elements/tree-view/examples/Filters.vue
+++ b/packages/docs/page-config/ui-elements/tree-view/examples/Filters.vue
@@ -4,8 +4,7 @@
       v-model="filter"
       placeholder="Filter..."
       clearable
-      class="mr-3"
-      style="flex: 0 200px;"
+      class="mr-3 grow-0 basis-24"
     />
     <va-checkbox
       v-model="isFilterCaseSensitive"