Add focus styles to TW typography

studio1902 · Nov 8, 2021 · 1fa9bd4 · 1fa9bd4
1 parent 4896781
commit 1fa9bd4
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,7 +15,7 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
-# Comment the following lines if you don't compile your assets on your server:
-/public/js/
-/public/css/
-/public/mix-manifest.json
+# Uncomment the following lines when you compile your assets on the server (recommended):
+# /public/js/
+# /public/css/
+# /public/mix-manifest.json
diff --git a/dev/.gitignore b/dev/.gitignore
@@ -15,7 +15,7 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
-# Comment the following lines if you don't compile your assets on your server:
-/public/js/
-/public/css/
-/public/mix-manifest.json
+# Uncomment the following lines when you compile your assets on the server (recommended):
+# /public/js/
+# /public/css/
+# /public/mix-manifest.json
diff --git a/dev/public/css/site.css b/dev/public/css/site.css
diff --git a/dev/public/css/tailwind.css b/dev/public/css/tailwind.css
diff --git a/dev/public/js/site.js b/dev/public/js/site.js
diff --git a/dev/public/mix-manifest.json b/dev/public/mix-manifest.json
@@ -0,0 +1,4 @@
+{
+    "/js/site.js": "/js/site.js?id=425011208a3254bef401",
+    "/css/site.css": "/css/site.css?id=74537195da7f99d885c3"
+}
diff --git a/dev/tailwind.config.typography.js b/dev/tailwind.config.typography.js
@@ -24,6 +24,14 @@ module.exports = {
               '&:hover': {
                 color: theme('colors.primary.DEFAULT'),
               },
+              '&.focus-visible': {
+                boxShadow: `0 0 0 2px ${theme('colors.primary.DEFAULT')}`,
+                borderRadius: theme('borderRadius.sm'),
+              },
+              '&:focus-visible': {
+                boxShadow: `0 0 0 2px ${theme('colors.primary.DEFAULT')}`,
+                borderRadius: theme('borderRadius.sm'),
+              },
             },
             'a.no-underline': {
               textDecoration: 'none',