Update variable names to match Tailwind 2.0

Author: adamwathan

src/index.js

@@ -37,13 +37,13 @@ const forms = plugin(function ({ addBase, theme }) {
       '&:focus': {
         outline: outline.none[0],
         'outline-offset': outline.none[1],
-        '--ring-inset': 'var(--tailwind-empty,/*!*/ /*!*/)',
+        '--ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
         '--ring-offset-width': '0px',
         '--ring-offset-color': '#fff',
         '--ring-color': theme('colors.blue.600', colors.blue[600]),
-        '--ring-offset-shadow': `var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color)`,
-        '--ring-shadow': `var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color)`,
-        'box-shadow': `var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000)`,
+        '--ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+        '--ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+        'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
         'border-color': theme('colors.blue.600', colors.blue[600]),
       },
     },
@@ -121,14 +121,14 @@ const forms = plugin(function ({ addBase, theme }) {
     `]: {
       outline: outline.none[0],
       'outline-offset': outline.none[1],
-      '--ring-inset': 'var(--tailwind-empty,/*!*/ /*!*/)',
+      '--ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
       '--ring-offset-width': '2px',
       '--ring-offset-color': '#fff',
       '--ring-color': theme('colors.blue.600', colors.blue[600]),
-      '--ring-offset-shadow': `var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color)`,
-      '--ring-shadow': `var(--ring-inset) 0 0 0 calc(2px + var(--ring-offset-width)) var(--ring-color)`,
-      'box-shadow': `var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000)`,
-      'border-color': theme('colors.gray.300', colors.gray[300]),
+      '--ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+      '--ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+      'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
+      'border-color': theme('colors.gray.400', colors.gray[400]),
     },
 
     [`