fix(other): fix tailwind (#297)

* remove empty main.css

* fix tailwind to work properly with vuepress

Have Headline paddings apply only to the blank layout.
Change contentwidth only on blank layout.
Do only partially import tailwind (ommit preflight) as it is in conflict
with vuepress.

* tailwind load preflight, but exclude certain styles

* limit fixes to vuepress classes

docs/.vuepress/layouts/BlankLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="theme-container">
+  <div class="theme-container blank-layout">
     <Content />
     <Footer />
   </div>
@@ -9,4 +9,49 @@
 export default {
   name: 'BlankLayout'
 }
-</script>
+</script>
+
+<style>
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/* Conflicts with vuepress */
+@layer base {
+  .vp-sidebar {
+    box-sizing: content-box;
+  }
+  .vp-nav-logo {
+    display: inline;
+  }
+}
+
+.blank-layout {
+  --content-width: 1160px;
+}
+
+.blank-layout h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading);
+  }
+
+.blank-layout h1, h2 {
+  border-bottom: none;
+  padding-bottom: 2rem;
+  font-weight: bold;
+}
+
+.blank-layout .content-width {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 0 2.5rem;
+
+  @media (max-width: 768px) {
+    padding: 0 1.75rem;
+  }
+  @media (max-width: 400px) {
+    padding: 0 1rem;
+  }
+}
+</style>

docs/.vuepress/styles/index.scss

@@ -1,8 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');
 
 :root {
-  --content-width: 1160px;
-
   --font-family: 'Source Sans 3', sans-serif;
   --font-family-heading: 'Montserrat', sans-serif;
 
@@ -11,24 +9,12 @@
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-family-heading);
+  font-family: 'Montserrat', sans-serif !important;
+}
+.font-montserrat {
+  font-family: 'Montserrat', sans-serif !important;
 }
 
-h1, h2 {
-  border-bottom: none;
-  padding-bottom: 2rem;
-  font-weight: bold;
-}
-
-.content-width {
-  max-width: var(--content-width);
-  margin: 0 auto;
-  padding: 0 2.5rem;
-
-  @media (max-width: 768px) {
-    padding: 0 1.75rem;
-  }
-  @media (max-width: 400px) {
-    padding: 0 1rem;
-  }
-}
+.font-sourcesans {
+  font-family: 'Source Sans 3', sans-serif !important;
+}

docs/index.md

@@ -190,23 +190,6 @@ layout: BlankLayout
   <ContactForm />
 </ContentSection>
 
-
-<style>
-  @import "tailwindcss";
-  
-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Montserrat', sans-serif !important;
-  }
-  
-  .font-montserrat {
-    font-family: 'Montserrat', sans-serif !important;
-  }
-
-  .font-sourcesans {
-    font-family: 'Source Sans 3', sans-serif !important;
-  }
-</style>
-
 <style lang="scss">
   .text-shadow {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);