From f36975e78cf63fad59e3d9d7af9b6c99c7be01ab Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 19 Mar 2025 19:19:48 +0100
Subject: [PATCH] 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 | 49 ++++++++++++++++++++++++--
 docs/.vuepress/styles/index.scss       | 28 ++++-----------
 docs/.vuepress/styles/main.css         |  0
 docs/index.md                          | 17 ---------
 4 files changed, 54 insertions(+), 40 deletions(-)
 delete mode 100644 docs/.vuepress/styles/main.css

diff --git a/docs/.vuepress/layouts/BlankLayout.vue b/docs/.vuepress/layouts/BlankLayout.vue
index 21e01c2..6109cd6 100644
--- a/docs/.vuepress/layouts/BlankLayout.vue
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index 06bcf58..6371762 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/docs/.vuepress/styles/main.css b/docs/.vuepress/styles/main.css
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/index.md b/docs/index.md
index b62082e..1b9f865 100644
--- a/docs/index.md
+++ b/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);