From 38e980de13f7520ebbace840330625cba0ca41f8 Mon Sep 17 00:00:00 2001
From: Hidetaro7 <hidetaro7@gmail.com>
Date: Mon, 6 Sep 2021 18:13:18 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Tab=E3=81=AE=E4=B8=8D=E5=85=B7=E5=90=88?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/tailwindcss/tab.js | 41 ++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/tailwindcss/tab.js b/packages/tailwindcss/tab.js
index c2400063..1587f1f3 100644
--- a/packages/tailwindcss/tab.js
+++ b/packages/tailwindcss/tab.js
@@ -28,6 +28,7 @@ module.exports = plugin.withOptions(
             li: {
               display: "block",
               margin: 0,
+              marginRight: `${theme("spacing.2")}`,
               padding: 0,
               "&::before, &::after": {
                 display: "none",
@@ -39,7 +40,6 @@ module.exports = plugin.withOptions(
                 },
               },
               a: {
-                cursor: "pointer",
                 color: `${theme("colors.primary.700")}`,
                 textDecoration: "none",
                 "border-bottom": `1px solid ${theme("colors.gray.300")}`,
@@ -49,24 +49,29 @@ module.exports = plugin.withOptions(
                 "margin-bottom": "-1px",
                 padding: `${theme("spacing.3")} ${theme("spacing.4")}`,
                 "vertical-align": "top",
-                "&:hover": {
-                  "border-bottom": `1px solid ${theme("colors.gray.900")}`,
-                  color: `${theme("colors.primary.800")}`,
-                },
               },
             },
-            "&-boxed": {
+            "li:not(.is-active)": {
               a: {
-                border: "1px solid transparent",
-                "border-radius": `${theme("borderRadius.md")} ${theme(
-                  "borderRadius.md"
-                )} 0 0`,
+                cursor: "pointer",
                 "&:hover": {
-                  "background-color": `${theme("colors.white")}`,
-                  border: `1px solid ${theme("colors.gray.300")}`,
+                  "border-bottom": `1px solid ${theme("colors.gray.400")}`,
+                  color: `${theme("colors.primary.800")}`,
+                  backgroundColor: `${theme("colors.gray.50")}`,
+                },
+                "&:active": {
+                  backgroundColor: `${theme("colors.gray.100")}`,
                 },
               },
+            },
+            "&-boxed": {
               li: {
+                a: {
+                  border: "1px solid transparent",
+                  "border-radius": `${theme("borderRadius.md")} ${theme(
+                    "borderRadius.md"
+                  )} 0 0`,
+                },
                 "&.is-active": {
                   a: {
                     border: `1px solid ${theme("colors.gray.300")}`,
@@ -76,6 +81,18 @@ module.exports = plugin.withOptions(
                 },
               },
             },
+            "&-boxed li:not(.is-active)": {
+              a: {
+                "&:hover": {
+                  "background-color": `${theme("colors.gray.50")}`,
+                  border: `1px solid ${theme("colors.gray.300")}`,
+                  borderBottom: `1px solid ${theme("colors.white")}`,
+                },
+                "&:active": {
+                  backgroundColor: `${theme("colors.gray.100")}`,
+                },
+              },
+            },
           },
         },
       ]);