From 917c21cc840aa7a861c9ba2156d971b827f81f3e Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Tue, 5 Jul 2022 18:12:59 +0300
Subject: [PATCH] feat: vp-raw

---
 docs/.postcssrc.js                            | 18 +++++++++
 docs/.vitepress/config.ts                     |  3 +-
 .../alert/examples/AlertBorderExample.vue     |  2 +-
 .../alert/examples/AlertClosableExample.vue   |  2 +-
 .../guide/alert/examples/AlertIconExample.vue |  2 +-
 .../alert/examples/AlertInlineExample.vue     |  2 +-
 .../alert/examples/AlertTitleExample.vue      |  2 +-
 .../guide/alert/examples/AlertTypeExample.vue |  2 +-
 .../button/examples/ButtonColorExample.vue    |  2 +-
 .../button/examples/ButtonDisabledExample.vue |  2 +-
 .../examples/ButtonGradientDuotoneExample.vue |  2 +-
 .../ButtonGradientMonochromeExample.vue       |  2 +-
 .../examples/ButtonGradientShadowExample.vue  |  2 +-
 .../button/examples/ButtonIconExample.vue     |  2 +-
 .../button/examples/ButtonLoadingExample.vue  |  2 +-
 .../examples/ButtonOutlineColorExample.vue    |  2 +-
 .../examples/ButtonOutlineGradientExample.vue |  2 +-
 .../button/examples/ButtonPillExample.vue     |  2 +-
 .../button/examples/ButtonPrefixExample.vue   |  2 +-
 .../button/examples/ButtonSizeExample.vue     |  2 +-
 .../button/examples/ButtonSquareExample.vue   |  2 +-
 .../button/examples/ButtonSuffixExample.vue   |  2 +-
 .../examples/ButtonGroupBasicExample.vue      | 14 ++++---
 .../examples/ButtonGroupIconExample.vue       | 24 ++++++-----
 .../spinner/examples/SpinnerBasicExample.vue  |  2 +-
 .../spinner/examples/SpinnerColorExample.vue  |  2 +-
 .../spinner/examples/SpinnerSizeExample.vue   |  2 +-
 .../tabs/examples/TabsDefaultExample.vue      |  8 ++++
 docs/guide/tabs/tabs.md                       |  5 +++
 package-lock.json                             |  6 +++
 package.json                                  |  8 +---
 src/components/Alert/Alert.vue                |  2 +-
 src/components/Tabs/Tabs.vue                  | 40 +++++++++++++++++++
 src/components/Tabs/components/Tab/Tab.vue    | 28 +++++++++++++
 .../Tabs/components/Tab/useTabClasses.ts      |  0
 src/components/Tabs/useTabsClasses.ts         | 34 ++++++++++++++++
 src/index.ts                                  |  2 +
 37 files changed, 190 insertions(+), 48 deletions(-)
 create mode 100644 docs/.postcssrc.js
 create mode 100644 docs/guide/tabs/examples/TabsDefaultExample.vue
 create mode 100644 docs/guide/tabs/tabs.md
 create mode 100644 src/components/Tabs/Tabs.vue
 create mode 100644 src/components/Tabs/components/Tab/Tab.vue
 create mode 100644 src/components/Tabs/components/Tab/useTabClasses.ts
 create mode 100644 src/components/Tabs/useTabsClasses.ts

diff --git a/docs/.postcssrc.js b/docs/.postcssrc.js
new file mode 100644
index 0000000..f87139c
--- /dev/null
+++ b/docs/.postcssrc.js
@@ -0,0 +1,18 @@
+// https://github.com/vuejs/vitepress/issues/199#issuecomment-1168325262
+// by default vitepress adds .vp-doc h1|h2|h3...p and others tags inside vitepress document.
+// here we add :not(:where(.vp-raw *)) selector to use it inside component examples
+// to prevent component style pollution from .vp-doc styles
+
+module.exports = {
+    plugins: {
+        'tailwindcss': {},
+        'postcss-prefix-selector': {
+            prefix: ':not(:where(.vp-raw *))',
+            includeFiles: [/vp-doc\.css/],
+            transform(prefix, _selector) {
+                const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
+                return selector + prefix + pseudo
+            }
+        },
+    }
+}
\ No newline at end of file
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b0b3cb3..db1b1a5 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -20,6 +20,7 @@ function getComponents() {
     { text: 'Button', link: '/guide/button/button.md' },
     { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
     { text: 'Spinner', link: '/guide/spinner/spinner.md' },
+    { text: 'Tabs', link: '/guide/tabs/tabs.md' },
   ]
 }
 
@@ -28,7 +29,7 @@ function getComponents() {
  * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js
  */
 export default {
-  title: 'flowbite-vue vitepress',
+  title: 'Flowbite Vue 3 Components',
   themeConfig: {
     docsDir: 'docs',
     sidebar: buildSidebar(),
diff --git a/docs/guide/alert/examples/AlertBorderExample.vue b/docs/guide/alert/examples/AlertBorderExample.vue
index 08d551b..a5b5fa2 100644
--- a/docs/guide/alert/examples/AlertBorderExample.vue
+++ b/docs/guide/alert/examples/AlertBorderExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" border class="mb-2">Info</Alert>
     <Alert type="warning" border class="mb-2">Warning</Alert>
     <Alert type="danger" border class="mb-2">Danger</Alert>
diff --git a/docs/guide/alert/examples/AlertClosableExample.vue b/docs/guide/alert/examples/AlertClosableExample.vue
index 78742e9..df8aa11 100644
--- a/docs/guide/alert/examples/AlertClosableExample.vue
+++ b/docs/guide/alert/examples/AlertClosableExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" closable class="mb-2">Info</Alert>
     <Alert type="warning" closable class="mb-2">Warning</Alert>
     <Alert type="danger" closable class="mb-2">Danger</Alert>
diff --git a/docs/guide/alert/examples/AlertIconExample.vue b/docs/guide/alert/examples/AlertIconExample.vue
index 57542ec..85444cc 100644
--- a/docs/guide/alert/examples/AlertIconExample.vue
+++ b/docs/guide/alert/examples/AlertIconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" :icon="false" class="mb-2">Info</Alert>
     <Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
     <Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
diff --git a/docs/guide/alert/examples/AlertInlineExample.vue b/docs/guide/alert/examples/AlertInlineExample.vue
index 9c6efd0..49dc4d3 100644
--- a/docs/guide/alert/examples/AlertInlineExample.vue
+++ b/docs/guide/alert/examples/AlertInlineExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" title="Info title" :inline="false" class="mb-2">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
     </Alert>
diff --git a/docs/guide/alert/examples/AlertTitleExample.vue b/docs/guide/alert/examples/AlertTitleExample.vue
index 88d4269..00ab33b 100644
--- a/docs/guide/alert/examples/AlertTitleExample.vue
+++ b/docs/guide/alert/examples/AlertTitleExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" title="Some info title" class="mb-2">Info</Alert>
     <Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
     <Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
diff --git a/docs/guide/alert/examples/AlertTypeExample.vue b/docs/guide/alert/examples/AlertTypeExample.vue
index 957cb95..dd2c2cb 100644
--- a/docs/guide/alert/examples/AlertTypeExample.vue
+++ b/docs/guide/alert/examples/AlertTypeExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" class="mb-2">Info</Alert>
     <Alert type="warning" class="mb-2">Warning</Alert>
     <Alert type="danger" class="mb-2">Danger</Alert>
diff --git a/docs/guide/button/examples/ButtonColorExample.vue b/docs/guide/button/examples/ButtonColorExample.vue
index 779be8e..3e63035 100644
--- a/docs/guide/button/examples/ButtonColorExample.vue
+++ b/docs/guide/button/examples/ButtonColorExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">Default</Button>
     <Button color="alternative">Alternative</Button>
     <Button color="dark">Dark</Button>
diff --git a/docs/guide/button/examples/ButtonDisabledExample.vue b/docs/guide/button/examples/ButtonDisabledExample.vue
index 61b50f9..9692b37 100644
--- a/docs/guide/button/examples/ButtonDisabledExample.vue
+++ b/docs/guide/button/examples/ButtonDisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" disabled>Default</Button>
     <Button color="default" outline disabled>Default outline</Button>
     <Button gradient="red" disabled>Red gradient</Button>
diff --git a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue b/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
index 8892e36..921526b 100644
--- a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
+++ b/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue">Purple to blue</Button>
     <Button gradient="cyan-blue">Cyan to blue</Button>
     <Button gradient="green-blue">Green to blue</Button>
diff --git a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue b/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
index fccba4b..005667b 100644
--- a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
+++ b/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="blue">Blue</Button>
     <Button gradient="cyan">Cyan</Button>
     <Button gradient="green">Green</Button>
diff --git a/docs/guide/button/examples/ButtonGradientShadowExample.vue b/docs/guide/button/examples/ButtonGradientShadowExample.vue
index 7e3debc..81ecfcd 100644
--- a/docs/guide/button/examples/ButtonGradientShadowExample.vue
+++ b/docs/guide/button/examples/ButtonGradientShadowExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="blue" shadow>Blue with blue</Button>
     <Button gradient="cyan" shadow>Cyan with cyan</Button>
     <Button gradient="green" shadow>Green with green</Button>
diff --git a/docs/guide/button/examples/ButtonIconExample.vue b/docs/guide/button/examples/ButtonIconExample.vue
index 40fd7bd..4b7546d 100644
--- a/docs/guide/button/examples/ButtonIconExample.vue
+++ b/docs/guide/button/examples/ButtonIconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue" square>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </Button>
diff --git a/docs/guide/button/examples/ButtonLoadingExample.vue b/docs/guide/button/examples/ButtonLoadingExample.vue
index 35e44ae..abd1ef0 100644
--- a/docs/guide/button/examples/ButtonLoadingExample.vue
+++ b/docs/guide/button/examples/ButtonLoadingExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
     <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
       Click me
     </Button>
diff --git a/docs/guide/button/examples/ButtonOutlineColorExample.vue b/docs/guide/button/examples/ButtonOutlineColorExample.vue
index 3a0e9b2..878550a 100644
--- a/docs/guide/button/examples/ButtonOutlineColorExample.vue
+++ b/docs/guide/button/examples/ButtonOutlineColorExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" outline>Default</Button>
     <Button color="dark" outline>Dark</Button>
     <Button color="green" outline>Green</Button>
diff --git a/docs/guide/button/examples/ButtonOutlineGradientExample.vue b/docs/guide/button/examples/ButtonOutlineGradientExample.vue
index 42d0707..e5dedb2 100644
--- a/docs/guide/button/examples/ButtonOutlineGradientExample.vue
+++ b/docs/guide/button/examples/ButtonOutlineGradientExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue" outline>Purple to blue</Button>
     <Button gradient="cyan-blue" outline>Cyan to blue</Button>
     <Button gradient="green-blue" outline>Green to blue</Button>
diff --git a/docs/guide/button/examples/ButtonPillExample.vue b/docs/guide/button/examples/ButtonPillExample.vue
index c7184ad..801c399 100644
--- a/docs/guide/button/examples/ButtonPillExample.vue
+++ b/docs/guide/button/examples/ButtonPillExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" pill>Default</Button>
     <Button color="alternative" pill>Alternative</Button>
     <Button color="dark" pill>Dark</Button>
diff --git a/docs/guide/button/examples/ButtonPrefixExample.vue b/docs/guide/button/examples/ButtonPrefixExample.vue
index 86ca8c8..de2958f 100644
--- a/docs/guide/button/examples/ButtonPrefixExample.vue
+++ b/docs/guide/button/examples/ButtonPrefixExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">
       <template #prefix>
         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
diff --git a/docs/guide/button/examples/ButtonSizeExample.vue b/docs/guide/button/examples/ButtonSizeExample.vue
index 36ee40b..d4da723 100644
--- a/docs/guide/button/examples/ButtonSizeExample.vue
+++ b/docs/guide/button/examples/ButtonSizeExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
     <Button size="xs">Extra small - xs</Button>
     <Button size="sm">Small - sm</Button>
     <Button size="md">Medium - md</Button>
diff --git a/docs/guide/button/examples/ButtonSquareExample.vue b/docs/guide/button/examples/ButtonSquareExample.vue
index f06287a..64a9cda 100644
--- a/docs/guide/button/examples/ButtonSquareExample.vue
+++ b/docs/guide/button/examples/ButtonSquareExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="red-yellow" square>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </Button>
diff --git a/docs/guide/button/examples/ButtonSuffixExample.vue b/docs/guide/button/examples/ButtonSuffixExample.vue
index 382db78..f1e9214 100644
--- a/docs/guide/button/examples/ButtonSuffixExample.vue
+++ b/docs/guide/button/examples/ButtonSuffixExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">
       Choose plan
       <template #suffix>
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue b/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
index cfb19d0..5c01da9 100644
--- a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
+++ b/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
@@ -1,10 +1,12 @@
 <template>
-  <button-group>
-    <Button>hello world</Button>
-    <Button color="purple">hello world</Button>
-    <Button color="alternative">hello world</Button>
-    <Button color="red">hello world</Button>
-  </button-group>
+  <div class="vp-raw">
+    <button-group>
+      <Button>hello world</Button>
+      <Button color="purple">hello world</Button>
+      <Button color="alternative">hello world</Button>
+      <Button color="red">hello world</Button>
+    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue b/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
index 86e8310..959510e 100644
--- a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
+++ b/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
@@ -1,15 +1,17 @@
 <template>
-  <button-group>
-    <Button outline>Button1</Button>
-    <Button outline>Button2</Button>
-    <Button outline>Button3</Button>
-    <Button outline>
-      hello world
-      <template #suffix>
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Button>
-  </button-group>
+  <div class="vp-raw">
+    <button-group>
+      <Button outline>Button1</Button>
+      <Button outline>Button2</Button>
+      <Button outline>Button3</Button>
+      <Button outline>
+        hello world
+        <template #suffix>
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </template>
+      </Button>
+    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'
diff --git a/docs/guide/spinner/examples/SpinnerBasicExample.vue b/docs/guide/spinner/examples/SpinnerBasicExample.vue
index d041deb..fb46c50 100644
--- a/docs/guide/spinner/examples/SpinnerBasicExample.vue
+++ b/docs/guide/spinner/examples/SpinnerBasicExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner />
   </div>
 </template>
diff --git a/docs/guide/spinner/examples/SpinnerColorExample.vue b/docs/guide/spinner/examples/SpinnerColorExample.vue
index 4e99bfc..bb7b85d 100644
--- a/docs/guide/spinner/examples/SpinnerColorExample.vue
+++ b/docs/guide/spinner/examples/SpinnerColorExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner color="blue" size="6" />
     <spinner color="pink" size="8" />
     <spinner color="gray" size="10" />
diff --git a/docs/guide/spinner/examples/SpinnerSizeExample.vue b/docs/guide/spinner/examples/SpinnerSizeExample.vue
index fd1aab6..5f00ebd 100644
--- a/docs/guide/spinner/examples/SpinnerSizeExample.vue
+++ b/docs/guide/spinner/examples/SpinnerSizeExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner />
     <spinner size="6" />
     <spinner size="8" />
diff --git a/docs/guide/tabs/examples/TabsDefaultExample.vue b/docs/guide/tabs/examples/TabsDefaultExample.vue
new file mode 100644
index 0000000..1e601b6
--- /dev/null
+++ b/docs/guide/tabs/examples/TabsDefaultExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw">
+    <tabs />
+  </div>
+</template>
+<script setup>
+import { Tabs } from '../../../../src/index'
+</script>
diff --git a/docs/guide/tabs/tabs.md b/docs/guide/tabs/tabs.md
new file mode 100644
index 0000000..05daf1c
--- /dev/null
+++ b/docs/guide/tabs/tabs.md
@@ -0,0 +1,5 @@
+<script setup>
+import TabsDefaultExample from './examples/TabsDefaultExample.vue';
+</script>
+
+<TabsDefaultExample />
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 07c740f..cda5ba2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2357,6 +2357,12 @@
         "postcss-selector-parser": "^6.0.6"
       }
     },
+    "postcss-prefix-selector": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-1.16.0.tgz",
+      "integrity": "sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==",
+      "dev": true
+    },
     "postcss-selector-parser": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
diff --git a/package.json b/package.json
index 53ef14b..a7a7857 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,8 @@
     "eslint-plugin-vue": "^9.1.1",
     "flowbite": "^1.4.2",
     "jsdom": "^20.0.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.14",
+    "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.3.2",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.3",
@@ -53,10 +54,5 @@
     "vitest": "^0.16.0",
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.38.2"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {}
-    }
   }
 }
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 4405f68..9ff4653 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -16,7 +16,7 @@
     <div :class="contentClasses">
       <slot />
     </div>
-    <div class="inline-flex items-center">
+    <div class="inline-flex items-center" v-if="$slots.actions">
       <slot name="actions" />
     </div>
     <button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="inline && closable">
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
new file mode 100644
index 0000000..1105c95
--- /dev/null
+++ b/src/components/Tabs/Tabs.vue
@@ -0,0 +1,40 @@
+<template>
+  <div :class="divClasses">
+    <ul :class="ulClasses">
+      <li class="mr-2">
+        <a href="#" aria-current="page"
+           class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Profile</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
+      </li>
+      <li>
+        <a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useTabsClasses } from './useTabsClasses'
+import type { PropType } from 'vue'
+
+export type TabsVariant = 'default' | 'underline' | 'pills'
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<TabsVariant>,
+    default: 'default',
+  },
+})
+
+const { ulClasses, divClasses } = useTabsClasses(props)
+</script>
\ No newline at end of file
diff --git a/src/components/Tabs/components/Tab/Tab.vue b/src/components/Tabs/components/Tab/Tab.vue
new file mode 100644
index 0000000..38597d5
--- /dev/null
+++ b/src/components/Tabs/components/Tab/Tab.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ul class="">
+      <li class="mr-2">
+        <a href="#" aria-current="page"
+           class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Profile</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
+      </li>
+      <li>
+        <a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+
+</script>
\ No newline at end of file
diff --git a/src/components/Tabs/components/Tab/useTabClasses.ts b/src/components/Tabs/components/Tab/useTabClasses.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Tabs/useTabsClasses.ts b/src/components/Tabs/useTabsClasses.ts
new file mode 100644
index 0000000..31d5530
--- /dev/null
+++ b/src/components/Tabs/useTabsClasses.ts
@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { TabsVariant } from './Tabs.vue'
+
+export type UseTabsClassesProps = {
+    variant: TabsVariant
+}
+
+export function useTabsClasses(props: UseTabsClassesProps): {
+    ulClasses: Ref<string>,
+    divClasses: Ref<string>,
+} {
+
+    const ulClasses = computed(() => {
+        if(props.variant === 'default')
+            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400'
+        else if(props.variant === 'pills')
+            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400'
+        else if(props.variant === 'underline')
+            return 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400'
+        return ''
+    })
+
+    const divClasses = computed(() => {
+        if(props.variant === 'underline')
+            return 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700'
+        return ''
+    })
+
+    return {
+        ulClasses,
+        divClasses,
+    }
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 96e58bb..947cf74 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,3 +2,5 @@ export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
 export { default as Alert } from './components/Alert/Alert.vue'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'