Stable refactor

components/core/I18nWidget/I18nWidget.module.css

@@ -3,7 +3,11 @@
 }
 
 .button {
-  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+}
+
+.button:focus {
+  @apply outline-none;
 }
 
 .dropdownMenu {
@@ -15,9 +19,10 @@
 }
 
 .item {
-  @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
+  @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
   text-transform: capitalize;
 }
 
-.item.active {
+.item:hover {
+  @apply bg-accents-1;
 }

components/core/Navbar/Navbar.module.css

@@ -1,5 +1,11 @@
 .link {
-  @apply group inline-flex items-center text-base leading-6 font-medium
-  hover:text-accents-8 focus:outline-none focus:text-accents-8 transition
-  ease-in-out duration-150 cursor-pointer;
+  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer;
+}
+
+.link:hover {
+  @apply text-accents-8;
+}
+
+.link:focus {
+  @apply outline-none text-accents-8;
 }

components/core/Searchbar/Searchbar.module.css

@@ -1,6 +1,6 @@
 .input {
   @apply bg-transparent px-3 py-2 appearance-none w-full transition
-  duration-150 ease-in-out placeholder-accents-5 pr-10;
+  duration-150 ease-in-out pr-10;
   min-width: 300px;
 }
 

components/core/UserNav/DropdownMenu.module.css

@@ -4,14 +4,17 @@
   @screen lg {
     @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
   }
+}
 
-  & .link {
-    @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out
-    duration-150 text-base leading-6 font-medium text-gray-900 items-center;
-    text-transform: capitalize;
-  }
+.link {
+  @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
+  text-transform: capitalize;
+}
 
-  &.off {
-    @apply hidden;
-  }
+.link:hover {
+  @apply bg-accents-1;
+}
+
+.off {
+  @apply hidden;
 }

components/core/UserNav/UserNav.module.css

@@ -7,7 +7,7 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center outline-none;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none;
 
   &:hover {
     @apply text-accents-8 transition scale-110 duration-100;
@@ -28,5 +28,9 @@
 }
 
 .avatarButton {
-  @apply inline-flex justify-center rounded-full outline-none focus:outline-none;
+  @apply inline-flex justify-center rounded-full;
+}
+
+.avatarButton:focus {
+  @apply outline-none;
 }

components/product/ProductCard/ProductCard.module.css

@@ -113,12 +113,12 @@
 }
 
 .productPrice {
-  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
 
 .imageContainer {

components/product/ProductSlider/ProductSlider.module.css

@@ -5,7 +5,17 @@
 
 .leftControl,
 .rightControl {
-  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply bg-hover-2;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply outline-none shadow-outline-blue;
 }
 
 .leftControl {

components/product/ProductView/ProductView.module.css

@@ -83,7 +83,7 @@
 }
 
 .wishlistButton {
-  @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+  @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
 
   @screen lg {
     @apply right-12 text-white bg-violet;

components/ui/Button/Button.module.css

@@ -1,16 +1,13 @@
 .root {
-  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
-  bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
-  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
-  border border-transparent items-center;
+  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
 }
 
 .root:hover {
-  @apply bg-accents-0 text-base border border-secondary;
+  @apply bg-accents-0 text-primary border border-secondary;
 }
 
 .root:focus {
-  @apply shadow-outline;
+  @apply shadow-outline outline-none;
 }
 
 .root[data-active] {

components/ui/Input/Input.module.css

@@ -1,5 +1,7 @@
 .root {
-  @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 
-  px-6 w-full appearance-none transition duration-150 ease-in-out 
-  placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
+  @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
+}
+
+.root:focus {
+  @apply outline-none shadow-outline-gray;
 }

components/ui/Text/Text.module.css

@@ -7,9 +7,9 @@
 }
 
 .pageHeading {
-  @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
+  @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide;
 }
 
 .sectionHeading {
-  @apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3;
+  @apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3;
 }

tailwind.config.js

@@ -1,8 +1,4 @@
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
   purge: {
     content: [
       './pages/**/*.{js,ts,jsx,tsx}',
@@ -54,9 +50,5 @@ module.exports = {
       },
     },
   },
-  variants: {},
   plugins: [require('@tailwindcss/ui')],
-  experimental: {
-    applyComplexClasses: true,
-  },
 }