Use btn css class

css/package.json

@@ -10,6 +10,7 @@
         "cssnano": "^4.1.10",
         "postcss-cli": "^7.1.1",
         "postcss-hash": "^2.0.0",
+        "postcss-nested": "^4.2.3",
         "tailwindcss": "^1.5.1"
     }
 }

css/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
     plugins: [
+        require('postcss-nested'),
         require('tailwindcss'),
         require('autoprefixer'),
         require('cssnano')({

css/styles.css

@@ -2,6 +2,38 @@
 
 @tailwind components;
 
+.btn {
+    @apply font-semibold py-2 px-4 rounded;
+
+    &:focus {
+        @apply outline-none shadow-outline;
+    }
+}
+
+.btn-teal {
+    @apply bg-teal-500 text-white;
+
+    &:focus {
+        @apply bg-teal-600;
+    }
+
+    &:hover {
+        @apply bg-teal-600;
+    }
+}
+
+.btn-green {
+    @apply bg-green-500 text-white;
+
+    &:focus {
+        @apply bg-green-600;
+    }
+
+    &:hover {
+        @apply bg-green-600;
+    }
+}
+
 .nav {
     height: 64px;
 }

css/yarn.lock

@@ -1324,7 +1324,7 @@ postcss-minify-selectors@^4.0.2:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-postcss-nested@^4.1.1:
+postcss-nested@^4.1.1, postcss-nested@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
   integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==