Update Tailwind version, account for ring API changes

tailwindlabs · Nov 12, 2020 · 5c16689 · 5c16689
1 parent d0b9fd9
commit 5c16689
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "postcss": "^7.0.17"
   },
   "dependencies": {
-    "tailwindcss": "^2.0.0-alpha.15",
-    "mini-svg-data-uri": "^1.2.3"
+    "mini-svg-data-uri": "^1.2.3",
+    "tailwindcss": "^2.0.0-alpha.16"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -37,17 +37,18 @@ const forms = plugin(function ({ addBase, theme }) {
       '&:focus': {
         outline: outline.none[0],
         'outline-offset': outline.none[1],
-        '--ring-offset-shadow': `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
-        '--ring-shadow': `0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, ${theme(
-          'colors.blue.600',
-          colors.blue[600]
-        )})`,
+        '--ring-inset': 'var(--tailwind-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)`,
         'border-color': theme('colors.blue.600', colors.blue[600]),
       },
     },
 
-    '::placeholder': {
+    'input::placeholder, textarea::placeholder': {
       color: theme('colors.gray.400', colors.gray[400]),
       opacity: '1',
     },
@@ -120,11 +121,12 @@ const forms = plugin(function ({ addBase, theme }) {
     `]: {
       outline: outline.none[0],
       'outline-offset': outline.none[1],
-      '--ring-offset-shadow': `0 0 0 var(--ring-offset-width, 2px) var(--ring-offset-color, #fff)`,
-      '--ring-shadow': `0 0 0 calc(2px + var(--ring-offset-width, 2px)) var(--ring-color, ${theme(
-        'colors.blue.600',
-        colors.blue[600]
-      )})`,
+      '--ring-inset': 'var(--tailwind-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]),
     },