Step 3: adding a new button component class

colbyfayock · May 17, 2020 · 7a76e8a · 7a76e8a
1 parent 5f50cc2
commit 7a76e8a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+
+.btn-purple {
+  @apply bg-purple-700 text-white;
+}
+
+.btn-purple:hover {
+  @apply bg-purple-800;
+}
diff --git a/src/App.js b/src/App.js
@@ -14,7 +14,7 @@ function App() {
         Belligerent and numerous.
       </p>
 
-      <button className="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
+      <button className="btn btn-purple">
         Party with Slurm!
       </button>
 

diff --git a/src/index.css b/src/index.css
@@ -17864,6 +17864,30 @@ video {
   transition-delay: 1000ms;
 }
 
+.btn {
+  font-weight: 700;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 0.25rem;
+}
+
+.btn-purple {
+  --bg-opacity: 1;
+  background-color: #6b46c1;
+  background-color: rgba(107, 70, 193, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+}
+
+.btn-purple:hover {
+  --bg-opacity: 1;
+  background-color: #553c9a;
+  background-color: rgba(85, 60, 154, var(--bg-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;