diff --git a/package.json b/package.json
index 0c654cd..f7c7910 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "core-js": "^3.6.5",
     "postcss": "^7",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "tailwindcss-interaction-variants": "^5.0.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
diff --git a/public/index.html b/public/index.html
index 3e5a139..94f5fd1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
   </head>
   <body>
     <noscript>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..effd243
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,32 @@
+const { variants } = require('tailwindcss/defaultConfig');
+const { fontFamily } = require('tailwindcss/defaultTheme');
+const variationPlugin = require('tailwindcss-interaction-variants');
+
+module.exports = {
+  theme: {
+    rotate: {
+      '-90': '-90deg'
+    },
+    extend: {
+      colors: {
+        charade: '#2a293c',
+        'gun-powder': '#414054',
+        inherit: 'inherit',
+        periwinkle: '#d8e2f0'
+      },
+      fontFamily: {
+        sans: [
+          'Open Sans',
+          ...fontFamily.sans
+        ]
+      }
+    }
+  },
+  variants: {
+    backgroundColor: [...variants.backgroundColor, 'hocus', 'group-hocus'],
+    textDecoration: [...variants.textDecoration, 'group-hover', 'hocus', 'group-hocus']
+  },
+  plugins: [
+    variationPlugin
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index ef4ec7c..2a7efe9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9565,6 +9565,14 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+tailwindcss-interaction-variants@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-interaction-variants/-/tailwindcss-interaction-variants-5.0.0.tgz#8e0825dfa4b2a81804cbae536915e48a85e96580"
+  integrity sha512-Tmx9HjwuNA3G7cLUcebGkNchKkNVIZXBroxa0LBoq/KUb/xEKEM8qugUG7QczSNPhaZzpXmo3IzPkRhf4tDaOQ==
+  dependencies:
+    lodash "^4.17.19"
+    postcss-selector-parser "^6.0.2"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
