Fix interaction styles

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "postcss-nested": "^4.1.2",
     "tailwindcss": "^1.0.0-beta.3",
-    "tailwindcss-interaction-variants": "^1.0.0",
+    "tailwindcss-interaction-variants": "^2.0.0-beta.1",
     "tailwindcss-spaced-items": "^0.1.0"
   }
 }

tailwind.config.js

@@ -1,4 +1,5 @@
-let defaultTheme = require('tailwindcss/defaultTheme')
+const defaultConfig = require('tailwindcss/defaultConfig')
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   prefix: 'tw-',
@@ -11,11 +12,12 @@ module.exports = {
         'pink-600': '#ec16a8',
         'purple-600': '#b33ee9',
       },
-      variants: {
-        textStyle: ['responsive', 'hover', 'focus', 'hocus'],
-      },
     },
   },
+  variants: {
+    textColor: [...defaultConfig.variants.textColor, 'hocus'],
+    fontStyle: [...defaultConfig.variants.fontStyle, 'hocus']
+  },
   plugins: [
     require('tailwindcss-interaction-variants')(),
     require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),