only hover when u can hover

README.md

@@ -13,7 +13,6 @@ yarn publish
 ## things to do
 
 - add type when publish
--
 
 things yoinked from:
 
@@ -23,3 +22,7 @@ things yoinked from:
 - https://github.com/kraftdorian/react-ts-rollup-starter-lib/blob/master/package.json
 - https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion
 - https://github.com/appnexus/lucid/blob/master/src/components/Button/Button.stories.tsx
+
+probably yoink smth like this:
+
+- https://codepen.io/vituja1/pen/oNWzNwq

src/components/Buttons/StyledButton/StyledButton.tsx

@@ -37,13 +37,8 @@ const sizeStyles = {
 
 const textAnimationTW = `
   relative
-  after:(
-    absolute h-0.5 w-0 bottom-0 duration-300
-    left-1/2 // starting point for the animation
-    )
-  hover:(
-    after:(w-full left-0)
-  )
+  after:(absolute h-0.5 w-0 bottom-0 duration-200 left-1/2)
+  canhover:hover:after:(w-full left-0)
 `;
 
 const solidCommon = 'shadow-lg';
@@ -54,12 +49,12 @@ const variantStyles = {
   primary: {
     solid: {
       common: tw`text-white ${solidCommon}`,
-      enabled: tw`bg-blue-400 hover:(bg-blue-500)`,
+      enabled: [tw`bg-blue-400 canhover:hover:bg-blue-500`],
       disabled: tw`bg-blue-300`,
     },
     border: {
       common: tw`${borderCommon}`,
-      enabled: tw`text-blue-400 border-blue-400 hover:(text-white bg-blue-400)`,
+      enabled: tw`text-blue-400 border-blue-400 canhover:hover:(text-white bg-blue-400)`,
       disabled: tw`text-blue-300 border-blue-400/40`,
     },
     text: {
@@ -67,10 +62,7 @@ const variantStyles = {
       enabled: [
         tw`text-blue-400
         ${textAnimationTW}
-        after:(
-          background: bg-blue-400
-          )
-          `,
+        after:(background: bg-blue-400)`,
       ],
       disabled: tw`text-blue-300 ${textCommon}`,
     },
@@ -78,12 +70,12 @@ const variantStyles = {
   secondary: {
     solid: {
       common: tw`text-white ${solidCommon}`,
-      enabled: tw`bg-gray-400 hover:(bg-gray-500)`,
+      enabled: tw`bg-gray-400 canhover:hover:bg-gray-500`,
       disabled: tw`bg-gray-300`,
     },
     border: {
       common: tw`${borderCommon}`,
-      enabled: tw`text-gray-400 border-gray-400 hover:(text-white bg-gray-400)`,
+      enabled: tw`text-gray-400 border-gray-400 canhover:hover:(text-white bg-gray-400)`,
       disabled: tw`text-gray-300 border-gray-400/40`,
     },
     text: {
@@ -91,10 +83,7 @@ const variantStyles = {
       enabled: [
         tw`text-gray-400
         ${textAnimationTW}
-        after:(
-          background: bg-gray-400
-        )
-        `,
+        after:(background: bg-gray-400)`,
       ],
       disabled: tw`text-gray-300`,
     },
@@ -102,12 +91,12 @@ const variantStyles = {
   danger: {
     solid: {
       common: tw`text-white ${solidCommon}`,
-      enabled: tw`bg-red-400 hover:(bg-red-500)`,
+      enabled: tw`bg-red-400 canhover:hover:bg-red-500`,
       disabled: tw`bg-red-300`,
     },
     border: {
       common: tw`${borderCommon}`,
-      enabled: tw`text-red-400 border-red-400 hover:(text-white bg-red-400)`,
+      enabled: tw`text-red-400 border-red-400 canhover:hover:(text-white bg-red-400)`,
       disabled: tw`text-red-300 border-red-400/40`,
     },
     text: {
@@ -115,10 +104,7 @@ const variantStyles = {
       enabled: [
         tw`text-red-400
         ${textAnimationTW}
-        after:(
-          background: bg-red-400
-        )
-        `,
+        after:(background: bg-red-400)`,
       ],
       disabled: tw`text-red-300`,
     },
@@ -133,7 +119,7 @@ const Button = styled.button(
     disabled = false,
   }: ButtonProps) => [
     // common
-    tw`rounded-sm border-0 font-normal cursor-pointer	inline-block uppercase duration-500`,
+    tw`rounded-sm border-0 font-normal cursor-pointer	inline-block uppercase duration-200`,
 
     // sizes
     sizeStyles[size],
@@ -145,6 +131,9 @@ const Button = styled.button(
 
     // common disabled style
     disabled && tw`bg-opacity-40 cursor-not-allowed`,
+
+    // not sure about this one yet
+    // fill === 'text' && size === 'xs' && tw`after:(h-px)`,
   ]
 );
 

tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
         electric: '#db00ff',
         ribbon: '#0047ff',
       },
+      screens: {
+        canhover: { raw: '(hover: hover)' },
+      },
     },
   },
   plugins: [],