docs: style fixes

Author: Akryum

Diff for: docs/.vitepress/components/ArrowPadding.vue

@@ -9,6 +9,7 @@
       :prevent-overflow="false"
       :arrow-padding="tempPadding"
       :auto-hide="false"
+      class="w-max"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference

Diff for: docs/.vitepress/components/DropdownSimpleExample.vue

@@ -7,7 +7,7 @@
       @apply-hide="log('apply-hide')"
       @update:shown="log('update:shown', $event)"
     >
-      <button class="border border-gray-300 rounded px-4 py-2">
+      <button class="border border-gray-500 rounded px-4 py-2">
         Click me
       </button>
 

Diff for: docs/.vitepress/components/MenuSimpleExample.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="example flex justify-center">
     <VMenu>
-      <button class="border border-gray-300 rounded px-4 py-2">
+      <button class="border border-gray-500 rounded px-4 py-2">
         Hover me
       </button>
 
       <template #popper>
         <button
-          class="border border-gray-300 rounded px-4 py-2 m-4"
+          class="border border-gray-500 rounded px-4 py-2 m-4"
           @click="count++"
         >
           +{{ count }}

Diff for: docs/.vitepress/components/OffsetExample.vue

@@ -9,6 +9,7 @@
       :skidding="tempOffset[0]"
       :prevent-overflow="false"
       :arrow-padding="6"
+      class="w-max"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference

Diff for: docs/.vitepress/components/SubMenuExample.vue

@@ -27,7 +27,7 @@
               placement="right-start"
               instant-move
             >
-              <button class="rounded hover:bg-green-100 px-4 py-2">
+              <button class="rounded hover:bg-green-100 px-4 py-2 w-full">
                 Option {{ m }} >
               </button>
 

Diff for: docs/.vitepress/theme/style.postcss

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --vp-z-index-nav: 10500;
+}
+
 .example {
   @apply border-gray-500/25 border rounded-lg p-6 text-center;
   background-color: var(--vp-c-mute);
@@ -18,3 +22,19 @@
 .v-popper--theme-_editor-dropdown .v-popper__inner {
   @apply p-2;
 }
+
+
+/* Fix base styles for Tailwind (vitepress) */
+
+button, input, optgroup, select, textarea {
+  border-style: solid;
+}
+
+.example select {
+  appearance: auto;
+}
+
+.example option {
+  color: black;
+  background: white;
+}

Diff for: docs/guide/component.md

@@ -1,4 +1,4 @@
-# Component
+# Components
 
 For more advanced use cases such as dropdowns, you can use the components instead of the `v-tooltip` directive.