From 65985c013f933d9da7393a036afb2a66e1274cce Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Wed, 10 Aug 2022 19:10:37 -0400
Subject: [PATCH] Update component classes to Tailwind CSS way

---
 .../astro/features/StepsFeatures.astro        |  2 +-
 src/layouts/Layout.astro                      | 40 +------------------
 src/styles/base.css                           | 36 +++++++++++++++++
 tailwind.config.js                            |  6 ++-
 4 files changed, 43 insertions(+), 41 deletions(-)
diff --git a/src/components/astro/features/StepsFeatures.astro b/src/components/astro/features/StepsFeatures.astro
index 7baa704..d7eb12d 100644
--- a/src/components/astro/features/StepsFeatures.astro
+++ b/src/components/astro/features/StepsFeatures.astro
@@ -22,7 +22,7 @@ const {} = Astro.props;
               <div class="w-full md:w-1/3">
                 <button
                   type="button"
-                  class="btn-sm bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
                 >
                   Get started
                 </button>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 039ed93..d5c5731 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -28,49 +28,11 @@ const { title = "", description = "", withHeader = true } = Astro.props;
   </head>
 
   <body
-    class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900"
+    class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900 font-ibm-plex-sans"
   >
     <Header />
     <slot />
     <Footer />
-    <style>
-      :root {
-      }
-
-      :global(body) {
-        font-family: "IBM Plex Sans", sans-serif;
-      }
-
-      :global(.btn, .btn-sm) {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 0.25rem;
-        border-width: 1px;
-        border-color: transparent;
-        font-weight: 500;
-        line-height: 1.375;
-        transition-property: color, background-color, border-color, fill, stroke,
-          opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
-          -webkit-backdrop-filter;
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-          filter, backdrop-filter;
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-          filter, backdrop-filter, -webkit-text-decoration-color,
-          -webkit-backdrop-filter;
-        transition-duration: 0.15s;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        padding: 0.75rem 1.5rem;
-        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
-          0 4px 6px -2px rgba(0, 0, 0, 0.02);
-        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-          0 4px 6px -2px var(--tw-shadow-color);
-        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-      }
-    </style>
 
     <script is:inline>
       function toggleDarkMode() {
diff --git a/src/styles/base.css b/src/styles/base.css
index b5c61c9..2e1a664 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,3 +1,39 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center rounded border border-transparent font-medium leading-snug transition py-3 px-6 shadow-lg;
+
+    /*
+    display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0.25rem;
+        border-width: 1px;
+        border-color: transparent;
+        font-weight: 500;
+        line-height: 1.375;
+        transition-property: color, background-color, border-color, fill, stroke,
+          opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
+          -webkit-backdrop-filter;
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+          filter, backdrop-filter;
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+          filter, backdrop-filter, -webkit-text-decoration-color,
+          -webkit-backdrop-filter;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 0.75rem 1.5rem;
+        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+          0 4px 6px -2px rgba(0, 0, 0, 0.02);
+        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+          0 4px 6px -2px var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          */
+  }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 11d89ff..577d62e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'ibm-plex-sans': ['"IBM Plex Sans"', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
   darkMode: "class",
