Fix spinner component to allow it to be positioned correctly

resources/assets/styles/components/spinners.css

@@ -2,18 +2,15 @@
   color: transparent;
   pointer-events: none;
   position: relative;
+  @apply .h-16;
 
   &:after {
-    @apply .border-2 .border-grey-light .absolute .block;
+    @apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
     animation: spinners--spin 500ms infinite linear;
-    border-radius: 9999px;
     border-top-color: transparent !important;
     border-right-color: transparent !important;
     content: '';
-    width: 1em;
-    height: 1em;
     left: calc(50% - (1em / 2));
-    top: calc(50% - (1em / 2));
   }
 
   &.spinner-xl:after {

tailwind.js

@@ -641,9 +641,15 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
         '10': '2.5rem',
+        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+        '32': '8rem',
     },
 
 
@@ -670,8 +676,15 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
+        '10': '2.5rem',
+        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+        '32': '8rem',
     },
 
 
@@ -697,8 +710,15 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
+        '10': '2.5rem',
+        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+        '32': '8rem',
     },
 
 
@@ -723,6 +743,7 @@ module.exports = {
         'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
         'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
         'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+        'outline': '0 0 0 3px rgba(52,144,220,0.5)',
         'none': 'none',
     },
 
@@ -833,11 +854,12 @@ module.exports = {
     modules: {
         appearance: ['responsive'],
         backgroundAttachment: ['responsive'],
-        backgroundColors: ['responsive', 'hover'],
+        backgroundColors: ['responsive', 'hover', 'focus'],
         backgroundPosition: ['responsive'],
         backgroundRepeat: ['responsive'],
         backgroundSize: ['responsive'],
-        borderColors: ['responsive', 'hover'],
+        borderCollapse: [],
+        borderColors: ['responsive', 'hover', 'focus'],
         borderRadius: ['responsive'],
         borderStyle: ['responsive'],
         borderWidths: ['responsive'],
@@ -846,7 +868,7 @@ module.exports = {
         flexbox: ['responsive'],
         float: ['responsive'],
         fonts: ['responsive'],
-        fontWeights: ['responsive', 'hover'],
+        fontWeights: ['responsive', 'hover', 'focus'],
         height: ['responsive'],
         leading: ['responsive'],
         lists: ['responsive'],
@@ -857,18 +879,20 @@ module.exports = {
         minWidth: ['responsive'],
         negativeMargin: ['responsive'],
         opacity: ['responsive'],
+        outline: ['focus'],
         overflow: ['responsive'],
         padding: ['responsive'],
         pointerEvents: ['responsive'],
         position: ['responsive'],
         resize: ['responsive'],
-        shadows: ['responsive'],
+        shadows: ['responsive', 'hover', 'focus'],
         svgFill: [],
         svgStroke: [],
+        tableLayout: ['responsive'],
         textAlign: ['responsive'],
-        textColors: ['responsive', 'hover'],
+        textColors: ['responsive', 'hover', 'focus'],
         textSizes: ['responsive'],
-        textStyle: ['responsive', 'hover'],
+        textStyle: ['responsive', 'hover', 'focus'],
         tracking: ['responsive'],
         userSelect: ['responsive'],
         verticalAlign: ['responsive'],