diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index 78f649f460..1bf69e12b8 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -107,7 +107,9 @@ export default defineNuxtConfig({
   },
 
   tailwindcss: {
+    viewer: false,
     config: {
+      important: true,
       content: [
         "./components/**/*.{js,vue,ts}",
         "./page-config/**/*.{js,vue,ts}",
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 0ae4efdcf3..7705e45c48 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 747cd5973b..c3ad191b36 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 d6dd61253d..1d294814e4 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 9c7cc9b59e..7c3f7be5df 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 14fc4159a1..247e6a9e94 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 819b6ff517..38ebca416d 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 f56f17906f..e34e3742c2 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 a586d100ee..572600f895 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 e96b961ee2..b6b112b92b 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 a40b1ddbee..9b22f5169d 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 3f2fd769c5..25db5e7e83 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 72f6a1b0ac..ac6d51c67f 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 3d7c5782f0..7f6c0023aa 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 9f4810426b..94f5becf43 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 30c694fd73..d272211d23 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 f0ade93069..2aad84cb30 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 ed91506206..3c152dd76c 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 d4b44b4f65..d1ecbb2a4e 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 3916574597..f91c6c417d 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 2842f29f57..688e601081 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 fa399afaca..a07467334d 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 2597e700f8..5c5cb11111 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 43dd8cae55..f9ca2aac7a 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 1b1d9f6d96..5c78c775f9 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 6606d8f030..562ce3184d 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/date-input/examples/validation.vue b/packages/docs/page-config/ui-elements/date-input/examples/validation.vue
index dce41013b0..d90746b5ce 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 077e2ee488..c2efa636e9 100644
--- a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
+++ b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
@@ -9,7 +9,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 0624a68ab1..d9c69e4d6c 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 67644f4396..a67489dd9b 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="demo-viewport 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 565c038907..ecedeca83a 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="Enable gallery view"
diff --git a/packages/docs/page-config/ui-elements/form/examples/Submit.vue b/packages/docs/page-config/ui-elements/form/examples/Submit.vue
index 3b26f52737..a90d5915b7 100644
--- a/packages/docs/page-config/ui-elements/form/examples/Submit.vue
+++ b/packages/docs/page-config/ui-elements/form/examples/Submit.vue
@@ -1,6 +1,6 @@
 <template>
   <va-form
-    style="width: 300px;"
+    class="w-[300px]"
     tag="form"
     @submit.prevent="handleSubmit"
   >
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 f936ca5500..101f826cac 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"
@@ -22,8 +21,7 @@
 
     <div
       id="infinite-scroll-custom-target"
-      style="height: 200px;"
-      class="flex flex-col md6 lg4"
+      class="flex flex-col md6 lg4 h-[200px]"
     >
       <va-infinite-scroll
         :load="appendRecordsAsyncId"
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 6ae2f922af..fe86baa756 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
@@ -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">
         <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 6c2065e173..5399a32cda 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 94d33b83ab..5b7e228d22 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 ccb03cf38d..0e53b3b539 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 6ee6e51235..8b59f93f6f 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 1e0313fd78..77b01ca5da 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 a6d88fbe44..6a433dd02e 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 21741f7efc..a6b94000f9 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 5ab821ddbf..f00d72f5d5 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 433579fa12..a998986526 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 ae4b69b4b8..dcb58cd247 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 03accc33c7..cac79714b8 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/parallax/examples/Slot.vue b/packages/docs/page-config/ui-elements/parallax/examples/Slot.vue
index 1c00d9b42f..19ff74768d 100644
--- a/packages/docs/page-config/ui-elements/parallax/examples/Slot.vue
+++ b/packages/docs/page-config/ui-elements/parallax/examples/Slot.vue
@@ -1,8 +1,7 @@
 <template>
   <va-parallax :src="imageSrc">
     <div
-      class="flex items-center justify-center"
-      style="height: 100%;"
+      class="flex items-center justify-center h-full"
     >
       <va-icon
         class="mr-8"
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 9d655f140e..4fbad0c9b1 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/Default.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
index 7574c90e1c..93b67b735a 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
@@ -1,6 +1,6 @@
 <template>
   <va-scroll-container
-    style="max-height: 200px;"
+    class="max-h-52"
     vertical
   >
     <va-list>
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Gradient.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Gradient.vue
index 20e9c12ac0..11f410cae3 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Gradient.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Gradient.vue
@@ -1,6 +1,6 @@
 <template>
   <va-scroll-container
-    style="max-height: 300px;"
+    class="max-h-80"
     color="danger"
     vertical
     gradient
@@ -14,7 +14,7 @@
           name="star"
           color="primary"
           size="small"
-          style="margin-right: 0.5rem;"
+          class="mr-2"
         />
         {{ character }}
       </va-list-item>
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 84028db671..5c2c9838be 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/Rtl.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Rtl.vue
index 04269ece93..0fbedec3c7 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Rtl.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Rtl.vue
@@ -1,19 +1,19 @@
 <template>
-  <div style="display: flex; gap: 1rem;">
+  <div class="flex gap-4">
     <va-scroll-container
       vertical
-      style="width: 50%; max-height: 200px;"
+      class="w-1/2 max-h-[200px]"
     >
-      <div style="padding: 1rem;">
+      <div class="p-4">
         {{ lorem }}
       </div>
     </va-scroll-container>
     <va-scroll-container
       vertical
       rtl
-      style="width: 50%; max-height: 200px;"
+      class="w-1/2 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/scroll-container/examples/Size.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Size.vue
index 32f7ae8e7f..258ab12b72 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 76922cdf23..0a3134a16f 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 d2ee628a6a..eb8fd38f03 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 45d386ee97..10889990f2 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/IconOptions.vue b/packages/docs/page-config/ui-elements/select/examples/IconOptions.vue
index 2c18b471c0..40854b3309 100644
--- a/packages/docs/page-config/ui-elements/select/examples/IconOptions.vue
+++ b/packages/docs/page-config/ui-elements/select/examples/IconOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="max-width: 300px;">
+  <div class="max-w-sm">
     <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 7750ab23da..05b8b387f2 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 c07d4bd2cd..414632ee5a 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 0d1fa99d76..4709518af8 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 c0adff6308..b08dd06773 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 c955bbccaa..0a700b1548 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 cb1ca2edb4..cc3098c905 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 fd5d641ece..7443aca76a 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 4ec01fc2b7..b23ff525ad 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 6ee5d6d2f8..c1b5070bf4 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 5eb938b3c7..09fd5f5ad6 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 37939e401f..d87f713e3b 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-item/examples/Icons.vue b/packages/docs/page-config/ui-elements/sidebar-item/examples/Icons.vue
index f4874ac5bc..2d74bdb01b 100644
--- a/packages/docs/page-config/ui-elements/sidebar-item/examples/Icons.vue
+++ b/packages/docs/page-config/ui-elements/sidebar-item/examples/Icons.vue
@@ -17,7 +17,7 @@
     <va-sidebar-item-content>
       <va-icon name="cake" />
       <va-icon name="celebration" />
-      <va-sidebar-item-title style="text-align: center;">
+      <va-sidebar-item-title class="text-center">
         GO TO PARTY!
       </va-sidebar-item-title>
       <va-icon name="cake" />
diff --git a/packages/docs/page-config/ui-elements/sidebar-item/examples/Simple.vue b/packages/docs/page-config/ui-elements/sidebar-item/examples/Simple.vue
index 4ec3fb59e1..d071a356e3 100644
--- a/packages/docs/page-config/ui-elements/sidebar-item/examples/Simple.vue
+++ b/packages/docs/page-config/ui-elements/sidebar-item/examples/Simple.vue
@@ -7,7 +7,7 @@
 
   <va-sidebar-item>
     <va-sidebar-item-content>
-      <va-sidebar-item-title style="text-align: center;">
+      <va-sidebar-item-title class="text-center">
         I'm centered!
       </va-sidebar-item-title>
     </va-sidebar-item-content>
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Color.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Color.vue
index 099b73c0dd..37a16b85ba 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Color.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="mb-6"
-    style="height: 16rem; overflow: hidden;"
+    class="mb-6 h-64 overflow-hidden"
   >
     <va-sidebar
       color="primary"
@@ -33,8 +32,7 @@
   </div>
 
   <div
-    class="mb-6"
-    style="height: 16rem; overflow: hidden;"
+    class="mb-6 h-64 overflow-hidden"
   >
     <va-sidebar
       color="background-element"
@@ -44,7 +42,7 @@
     >
       <va-sidebar-item>
         <va-sidebar-item-content>
-          <va-sidebar-item-title style="white-space: normal;">
+          <va-sidebar-item-title class="whitespace-normal">
             background dark and auto text color
           </va-sidebar-item-title>
         </va-sidebar-item-content>
@@ -65,8 +63,7 @@
   </div>
 
   <div
-    class="mb-6"
-    style="height: 16rem; overflow: hidden;"
+    class="mb-6 h-52 overflow-hidden"
   >
     <va-sidebar
       color="#F0F7ED"
@@ -77,7 +74,7 @@
     >
       <va-sidebar-item active-color="#F0F7ED">
         <va-sidebar-item-content>
-          <va-sidebar-item-title style="white-space: normal;">
+          <va-sidebar-item-title class="whitespace-normal">
             background success and auto text color
           </va-sidebar-item-title>
         </va-sidebar-item-content>
@@ -101,8 +98,7 @@
   </div>
 
   <div
-    class="mb-6"
-    style="height: 16rem;"
+    class="mb-6 h-52"
   >
     <va-sidebar
       color="#FFD300"
@@ -114,7 +110,7 @@
     >
       <va-sidebar-item>
         <va-sidebar-item-content>
-          <va-sidebar-item-title style="white-space: normal;">
+          <va-sidebar-item-title class="whitespace-normal">
             background danger and success text color
           </va-sidebar-item-title>
         </va-sidebar-item-content>
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Default.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Default.vue
index 9e99be0f2e..b3d14769b5 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar>
       <va-sidebar-item>
         <va-sidebar-item-content>
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Gradient.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Gradient.vue
index 954a7bb6b3..7e00aaa094 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Gradient.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Gradient.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="mb-6"
-    style="height: 16rem;"
+    class="mb-6 h-64"
   >
     <va-sidebar
       color="primary"
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Hoverable.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Hoverable.vue
index fbd214977e..a91279aa52 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Hoverable.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Hoverable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar
       hoverable
       minimized-width="64px"
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Minimized.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Minimized.vue
index 6f250920b6..2dff0d61d6 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Minimized.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Minimized.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar
       :minimized="minimized"
       minimized-width="64px"
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/MinimizedWidth.vue b/packages/docs/page-config/ui-elements/sidebar/examples/MinimizedWidth.vue
index 142082c8dc..8e66c3f109 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/MinimizedWidth.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/MinimizedWidth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar
       :minimized="minimized"
       minimized-width="0"
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
index 7aa2846331..879a079600 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem; position: relative;">
+  <div class="relative h-52">
     <div class="content">
       Content
     </div>
@@ -8,7 +8,7 @@
       v-model="enabled"
       :minimized="minimized"
       position="right"
-      style="position: absolute;"
+      class="absolute"
     >
       <va-sidebar-item
         v-for="item in items"
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 e3245aaecb..0ebda7b046 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/sidebar/examples/Width.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Width.vue
index e96ec2b259..1cdb3c1c46 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Width.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Width.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 13rem;">
+  <div class="h-52">
     <va-sidebar
       :minimized="minimized"
       width="11rem"
diff --git a/packages/docs/page-config/ui-elements/skeleton/examples/Group.vue b/packages/docs/page-config/ui-elements/skeleton/examples/Group.vue
index 13d39adba7..db8b91945b 100644
--- a/packages/docs/page-config/ui-elements/skeleton/examples/Group.vue
+++ b/packages/docs/page-config/ui-elements/skeleton/examples/Group.vue
@@ -2,17 +2,17 @@
   <VaSkeletonGroup>
     <VaCard>
       <VaSkeleton variant="squared" height="120px" />
-      <va-card-content style="display: flex; align-items: center;">
+      <va-card-content class="flex items-center">
         <VaSkeleton variant="circle" width="1rem" height="48px" />
         <VaSkeleton variant="text" class="ml-2" :lines="2" />
       </va-card-content>
       <va-card-content>
         <VaSkeleton variant="text" :lines="4" text-width="50%" />
       </va-card-content>
-      <va-card-actions style="display: flex; justify-content: end;">
+      <va-card-actions class="flex justify-end">
         <VaSkeleton class="mr-2" variant="rounded" inline width="64px" height="32px" />
         <VaSkeleton variant="rounded" inline width="64px" height="32px" />
       </va-card-actions>
     </VaCard>
   </VaSkeletonGroup>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/docs/page-config/ui-elements/skeleton/examples/GroupWave.vue b/packages/docs/page-config/ui-elements/skeleton/examples/GroupWave.vue
index a47ec8259d..8303c96ae9 100644
--- a/packages/docs/page-config/ui-elements/skeleton/examples/GroupWave.vue
+++ b/packages/docs/page-config/ui-elements/skeleton/examples/GroupWave.vue
@@ -1,14 +1,14 @@
 <template>
   <VaSkeletonGroup animation="wave">
     <VaCard>
-      <va-card-content style="display: flex; align-items: center;">
+      <va-card-content class="flex items-center">
         <VaSkeleton variant="circle" width="1rem" height="48px" />
         <VaSkeleton variant="text" class="ml-2" :lines="2" />
       </va-card-content>
-      <va-card-actions style="display: flex; justify-content: end;">
+      <va-card-actions class="flex justify-end" style="display: flex; justify-content: end;">
         <VaSkeleton class="mr-2" variant="rounded" inline width="64px" height="32px" />
         <VaSkeleton variant="rounded" inline width="64px" height="32px" />
       </va-card-actions>
     </VaCard>
   </VaSkeletonGroup>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/docs/page-config/ui-elements/skeleton/examples/Loading.vue b/packages/docs/page-config/ui-elements/skeleton/examples/Loading.vue
index 521e1d3ecc..f78cc844b4 100644
--- a/packages/docs/page-config/ui-elements/skeleton/examples/Loading.vue
+++ b/packages/docs/page-config/ui-elements/skeleton/examples/Loading.vue
@@ -2,11 +2,11 @@
   <div :aria-busy="isLoading">
     <VaSkeletonGroup v-if="isLoading" animation="wave" :delay="0">
       <VaCard>
-        <va-card-content style="display: flex; align-items: center;">
+        <va-card-content class="flex items-center">
           <VaSkeleton variant="circle" width="1rem" height="48px" />
           <VaSkeleton variant="text" class="ml-2 va-text" :lines="2" />
         </va-card-content>
-        <va-card-actions style="display: flex; justify-content: end;">
+        <va-card-actions class="flex justify-end">
           <VaSkeleton class="mr-2" variant="rounded" inline width="82px" height="32px" />
           <VaSkeleton variant="rounded" inline width="64px" height="32px" />
         </va-card-actions>
@@ -14,7 +14,7 @@
     </VaSkeletonGroup>
 
     <VaCard v-else>
-      <va-card-content style="display: flex; align-items: center;">
+      <va-card-content class="flex items-center">
         <VaAvatar src="https://i.pinimg.com/280x280_RS/08/e9/ba/08e9ba9cbd24db8de0c250570af460a4.jpg" />
         <p class="ml-2 mb-0 va-text">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
@@ -23,7 +23,7 @@
         </p>
       </va-card-content>
 
-      <va-card-actions style="display: flex; justify-content: end;">
+      <va-card-actions class="flex justify-end">
         <va-button color="primary">Message</va-button>
         <va-button color="secondary">Follow</va-button>
       </va-card-actions>
@@ -48,4 +48,4 @@ const load = () => {
 }
 
 onMounted(load)
-</script>
\ No newline at end of file
+</script>
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 51b0123a26..2ffc5d1f2e 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 1ac2c4a669..c66588ed8a 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 cf1a3dec3a..83b08baed4 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/CustomGrabber.vue b/packages/docs/page-config/ui-elements/split/examples/CustomGrabber.vue
index 854486c84b..a33b111c03 100644
--- a/packages/docs/page-config/ui-elements/split/examples/CustomGrabber.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/CustomGrabber.vue
@@ -1,7 +1,6 @@
 <template>
   <va-split
-    class="split-demo"
-    style="height: 22rem;"
+    class="split-demo h-[22rem]"
   >
     <template #start>
       <div class="p-6">
diff --git a/packages/docs/page-config/ui-elements/split/examples/CustomLimits.vue b/packages/docs/page-config/ui-elements/split/examples/CustomLimits.vue
index 4d73f77c01..0554e784df 100644
--- a/packages/docs/page-config/ui-elements/split/examples/CustomLimits.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/CustomLimits.vue
@@ -1,11 +1,10 @@
 <template>
   <va-split
-    class="split-demo"
+    class="split-demo h-[22rem]"
     :limits="[
       [10, 'any'],
       ['50px', '30rem'],
     ]"
-    style="height: 22rem;"
   >
     <template #start>
       <div class="p-6">
diff --git a/packages/docs/page-config/ui-elements/split/examples/Disabled.vue b/packages/docs/page-config/ui-elements/split/examples/Disabled.vue
index be115af5c3..ecc8c1c6cc 100644
--- a/packages/docs/page-config/ui-elements/split/examples/Disabled.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/Disabled.vue
@@ -1,8 +1,7 @@
 <template>
   <va-split
-    class="split-demo"
+    class="split-demo h-[22rem]"
     disabled
-    style="height: 22rem;"
   >
     <template #start>
       <div class="p-6">
diff --git a/packages/docs/page-config/ui-elements/split/examples/Maximization.vue b/packages/docs/page-config/ui-elements/split/examples/Maximization.vue
index e73ec4dbec..d26fafe43d 100644
--- a/packages/docs/page-config/ui-elements/split/examples/Maximization.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/Maximization.vue
@@ -1,8 +1,7 @@
 <template>
   <va-split
-    class="split-demo"
+    class="split-demo h-[22rem]"
     maximization
-    style="height: 22rem;"
   >
     <template #start>
       <div class="p-6">
diff --git a/packages/docs/page-config/ui-elements/split/examples/Nested.vue b/packages/docs/page-config/ui-elements/split/examples/Nested.vue
index afc5094c53..2095b4c103 100644
--- a/packages/docs/page-config/ui-elements/split/examples/Nested.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/Nested.vue
@@ -20,7 +20,7 @@
     <template #end>
       <va-split
         vertical
-        style="height: 25rem;"
+        class="h-[25rem]"
       >
         <template #start>
           <div class="p-6">
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 f9654833fe..56163aabbd 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/split/examples/Vertical.vue b/packages/docs/page-config/ui-elements/split/examples/Vertical.vue
index 534257719d..138cfad45e 100644
--- a/packages/docs/page-config/ui-elements/split/examples/Vertical.vue
+++ b/packages/docs/page-config/ui-elements/split/examples/Vertical.vue
@@ -1,8 +1,7 @@
 <template>
   <va-split
-    class="split-demo"
+    class="split-demo h-[22rem]"
     vertical
-    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 838db56f55..21bf3783ee 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="max-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 13718efe77..9df6546723 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="max-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 6c13d695b4..9f018a8851 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 c019d6e5f0..1cccd28561 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 3769e29ae6..5bb3ca6726 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"
diff --git a/packages/docs/page-config/ui-elements/virtual-scroller/examples/DifferentContent.vue b/packages/docs/page-config/ui-elements/virtual-scroller/examples/DifferentContent.vue
index cdb45d45b0..6496ff9317 100644
--- a/packages/docs/page-config/ui-elements/virtual-scroller/examples/DifferentContent.vue
+++ b/packages/docs/page-config/ui-elements/virtual-scroller/examples/DifferentContent.vue
@@ -10,7 +10,7 @@
         <va-card>
           <va-image
             src="https://picsum.photos/400/200"
-            style="height: 200px;"
+            class="h-[200px]"
           />
           <va-card-title>{{ item }}</va-card-title>
           <va-card-content>