chore: Use tailwind instead of inline styles ( WIP )

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"

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>

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

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"

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

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

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>

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>

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>

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"

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"

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;

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;

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"

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>

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"

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>