diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Default.vue b/packages/docs/page-config/extensions/ag-grid/examples/Default.vue
index 6f9cabaef5..38be17fa60 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Default.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Default.vue
@@ -1,8 +1,7 @@
 <template>
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
+      class="ag-theme-vuestic w-full h-full"
       :columnDefs="columnDefs"
       :rowData="rowData"
       :modules="modules"
diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Editable.vue b/packages/docs/page-config/extensions/ag-grid/examples/Editable.vue
index 5e028078cf..2e4e14ad72 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Editable.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Editable.vue
@@ -1,8 +1,7 @@
 <template>
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
+      class="ag-theme-vuestic w-full h-full"
       :defaultColDef="defaultColDef"
       :columnDefs="columnDefs"
       :rowData="rowData"
diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Filter.vue b/packages/docs/page-config/extensions/ag-grid/examples/Filter.vue
index dc14bf510b..d3f2e1e80d 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Filter.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Filter.vue
@@ -1,8 +1,7 @@
 <template>
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
+      class="ag-theme-vuestic w-full h-full"
       :defaultColDef="defaultColDef"
       :columnDefs="columnDefs"
       :rowData="rowData"
diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Pagination.vue b/packages/docs/page-config/extensions/ag-grid/examples/Pagination.vue
index a6d5da568a..12a307fbe3 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Pagination.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Pagination.vue
@@ -1,8 +1,7 @@
 <template>
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
+      class="ag-theme-vuestic w-full h-full"
       :paginationAutoPageSize="true"
       :pagination="true"
       :columnDefs="columnDefs"
diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Pinning.vue b/packages/docs/page-config/extensions/ag-grid/examples/Pinning.vue
index 5e889d33f7..165c0b9918 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Pinning.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Pinning.vue
@@ -1,8 +1,7 @@
 <template>
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
-      style="width: 100%; height: 100%;"
+      class="ag-theme-vuestic w-full h-full"
       :columnDefs="columnDefs"
       :rowData="rowData"
       :pinnedTopRowData="pinnedTopRowData"
diff --git a/packages/docs/page-config/extensions/ag-grid/examples/Styles.vue b/packages/docs/page-config/extensions/ag-grid/examples/Styles.vue
index df32234d50..8a6905b3dc 100644
--- a/packages/docs/page-config/extensions/ag-grid/examples/Styles.vue
+++ b/packages/docs/page-config/extensions/ag-grid/examples/Styles.vue
@@ -1,11 +1,10 @@
 <template>
   <va-checkbox v-model="isStriped" label="Striped" />
   <va-checkbox v-model="isHoverable" label="Hoverable" />
-  <div style="height: 300px; width: 100%;">
+  <div class="h-[300px] w-full">
     <ag-grid-vue
-      class="ag-theme-vuestic"
+      class="ag-theme-vuestic w-full h-full"
       :class="{ 'ag-theme-vuestic--striped': isStriped, 'ag-theme-vuestic--hoverable': isHoverable }"
-      style="width: 100%; height: 100%;"
       :columnDefs="columnDefs"
       :rowData="rowData"
       :modules="modules"
diff --git a/packages/docs/page-config/introduction/roadmap/components/roadmap.vue b/packages/docs/page-config/introduction/roadmap/components/roadmap.vue
index 81fd03335b..4514920e6a 100644
--- a/packages/docs/page-config/introduction/roadmap/components/roadmap.vue
+++ b/packages/docs/page-config/introduction/roadmap/components/roadmap.vue
@@ -29,7 +29,7 @@
               >
                 <component
                   :is="item.image"
-                  style="width: 100%; min-height: 100px;"
+                  class="w-full min-h-[100px]"
                 />
               </div>
             </va-card-content>
diff --git a/packages/docs/page-config/services/components-config/examples/button.vue b/packages/docs/page-config/services/components-config/examples/button.vue
index 6dd26b2c5a..867e85f775 100644
--- a/packages/docs/page-config/services/components-config/examples/button.vue
+++ b/packages/docs/page-config/services/components-config/examples/button.vue
@@ -8,7 +8,7 @@
       class="mb-3"
     />
     <va-button
-      style="width: max-content;"
+      class="w-max"
       @click="reset"
     >
       Reset config
diff --git a/packages/docs/page-config/services/icons-config/components/playground.vue b/packages/docs/page-config/services/icons-config/components/playground.vue
index 36e5ce722e..d4d7653830 100644
--- a/packages/docs/page-config/services/icons-config/components/playground.vue
+++ b/packages/docs/page-config/services/icons-config/components/playground.vue
@@ -12,8 +12,7 @@
       </div>
 
       <div
-        class="col"
-        style="width: 100%;"
+        class="col w-full"
       >
         <div class="va-code-snippet">
           <span class="tag">va-icon name="<CodeInput
@@ -56,13 +55,11 @@
     <div class="demo-footer mt-2">
       <div class="flex items-center">
         <div
-          style="width: 64px;"
-          class="va-code-snippet va-code-snippet--icon mr-2"
+          class="va-code-snippet va-code-snippet--icon mr-2 w-[64px]"
           v-html="renderHTML(iconName)"
         />
         <div
-          class="va-code-snippet"
-          style="width: 100%;"
+          class="va-code-snippet w-full"
         >
           {{ renderHTML(iconName) }}
         </div>
diff --git a/packages/docs/page-config/styles/colors/components/Components.vue b/packages/docs/page-config/styles/colors/components/Components.vue
index 169c0f767d..6389a4cb8d 100644
--- a/packages/docs/page-config/styles/colors/components/Components.vue
+++ b/packages/docs/page-config/styles/colors/components/Components.vue
@@ -40,7 +40,7 @@
 
     <va-card class="card card-2">
       <va-card-content>
-        <table style="width: 100%;">
+        <table class="w-full">
           <tr>
             <td>Amount</td>
             <td>
diff --git a/packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue b/packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue
index ab6775a5d9..c1e0074de0 100644
--- a/packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue
+++ b/packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue
@@ -7,7 +7,7 @@
       <p>
         {{ name }}
       </p>
-      <p style="font-size: 14px;">
+      <p class="text-sm">
         var(--va-{{ kebabCase(name) }})<span class="ml-2">{{ value }}</span>
       </p>
     </div>
diff --git a/packages/docs/page-config/styles/css-variables/examples/profile.vue b/packages/docs/page-config/styles/css-variables/examples/profile.vue
index 17bd939df7..41f6866bcd 100644
--- a/packages/docs/page-config/styles/css-variables/examples/profile.vue
+++ b/packages/docs/page-config/styles/css-variables/examples/profile.vue
@@ -28,7 +28,7 @@
           <va-button
             preset="secondary"
             color="#fff"
-            style="margin-left: -0.5rem;"
+            class="-ml-[0.5rem]"
           >
             Follow
           </va-button>
diff --git a/packages/docs/page-config/styles/grid/examples/AlignContent.vue b/packages/docs/page-config/styles/grid/examples/AlignContent.vue
index 9694acff63..4785744ffd 100644
--- a/packages/docs/page-config/styles/grid/examples/AlignContent.vue
+++ b/packages/docs/page-config/styles/grid/examples/AlignContent.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <!-- align-content-start -->
     <div class="row align-content-start">
diff --git a/packages/docs/page-config/styles/grid/examples/AlignDefault.vue b/packages/docs/page-config/styles/grid/examples/AlignDefault.vue
index 904155f802..9740b8cc3d 100644
--- a/packages/docs/page-config/styles/grid/examples/AlignDefault.vue
+++ b/packages/docs/page-config/styles/grid/examples/AlignDefault.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <!-- align--start -->
     <div class="row align-start">
diff --git a/packages/docs/page-config/styles/grid/examples/AlignJustify.vue b/packages/docs/page-config/styles/grid/examples/AlignJustify.vue
index 8c75e96f52..24ab16c9a1 100644
--- a/packages/docs/page-config/styles/grid/examples/AlignJustify.vue
+++ b/packages/docs/page-config/styles/grid/examples/AlignJustify.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <!-- justify--start -->
     <div class="row justify-start">
diff --git a/packages/docs/page-config/styles/grid/examples/AlignSelf.vue b/packages/docs/page-config/styles/grid/examples/AlignSelf.vue
index 17f7fdeb89..05fb531ee5 100644
--- a/packages/docs/page-config/styles/grid/examples/AlignSelf.vue
+++ b/packages/docs/page-config/styles/grid/examples/AlignSelf.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <div class="row">
       <!-- align-self-start -->
diff --git a/packages/docs/page-config/styles/grid/examples/Breakpoints.vue b/packages/docs/page-config/styles/grid/examples/Breakpoints.vue
index b38756ae08..3b26d0a3ab 100644
--- a/packages/docs/page-config/styles/grid/examples/Breakpoints.vue
+++ b/packages/docs/page-config/styles/grid/examples/Breakpoints.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <div class="row">
       <div class="flex flex-col md12">
diff --git a/packages/docs/page-config/styles/grid/examples/Default.vue b/packages/docs/page-config/styles/grid/examples/Default.vue
index 589735775e..ce1c924cb9 100644
--- a/packages/docs/page-config/styles/grid/examples/Default.vue
+++ b/packages/docs/page-config/styles/grid/examples/Default.vue
@@ -1,12 +1,11 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p"
   >
     <div class="row">
       <div
-        class="flex flex-col"
-        style="width: 100%;"
+        class="flex flex-col w-full"
       >
         <div class="item">
           Now I'm flexible
diff --git a/packages/docs/page-config/styles/grid/examples/Gutters.vue b/packages/docs/page-config/styles/grid/examples/Gutters.vue
index 7a50675d64..52a80f61b6 100644
--- a/packages/docs/page-config/styles/grid/examples/Gutters.vue
+++ b/packages/docs/page-config/styles/grid/examples/Gutters.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <div class="layout gutter--md">
       <div class="row">
diff --git a/packages/docs/page-config/styles/grid/examples/Offsets.vue b/packages/docs/page-config/styles/grid/examples/Offsets.vue
index 43d7d4966f..72480f1a2b 100644
--- a/packages/docs/page-config/styles/grid/examples/Offsets.vue
+++ b/packages/docs/page-config/styles/grid/examples/Offsets.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     color="background-element"
-    style="padding: 0.75rem;"
+    class="p-3"
   >
     <div class="row">
       <div class="flex flex-col xs1 offset-md3 offset-lg2">