Merge pull request #14 from deroceratops/fix_issue13

Make elements styled with the class 'shadow-neu' adjust the shadow based on CSS pseudo classes.
ThreeDotsTech · Aug 27, 2024 · 5f82a1c · 5f82a1c
2 parents 262db07 + 3661251
commit 5f82a1c
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -34,6 +34,14 @@ module.exports = {
               boxShadow: `8px 8px 0 0 ${color}`,
               transition: 'box-shadow 0.2s ease-in-out',
             },
+            '&:active': {
+              boxShadow: `4px 4px 0 0 ${color}`,
+              transition: 'box-shadow 0.2s ease-in-out',
+            },
+            '&:focus': {
+              boxShadow: `4px 4px 0 0 ${color}`,
+              transition: 'box-shadow 0.2s ease-in-out',
+            }
           };
           boxShadowUtilities[`.${e(`shadow-neu-active-${colorName}`)}`] = {
               boxShadow: `4px 4px 0 0 ${color}`,
@@ -48,6 +56,14 @@ module.exports = {
                 boxShadow: `8px 8px 0 0 ${color[shade]}`,
                 transition: 'box-shadow 0.2s ease-in-out',
               },
+              '&:active': {
+                boxShadow: `4px 4px 0 0 ${color}`,
+                transition: 'box-shadow 0.2s ease-in-out',
+              },
+              '&:focus': {
+                boxShadow: `4px 4px 0 0 ${color}`,
+                transition: 'box-shadow 0.2s ease-in-out',
+              }
             };
             boxShadowUtilities[`.${e(`shadow-neu-active-${colorName}-${shade}`)}`] = {
                 boxShadow: `4px 4px 0 0 ${color[shade]}`,