hotfix: Fix Safari clipboard copy issue by disabling Tailwind preflight CSS (#480)

- These broke after disabling preflight, so the following adjustments were made:
  - Adjust primary colors to resolve conflict with Docusaurus' default color
  - Update font size and line height
  - Add viewBox for YouTube and GitHub icons to prevent cropping
- Remove Roboto Bold in Tailwind config to prevent fallback to Times in h3 and highlighted text (separate CSS conflict, not related to this hotfix)

Signed-off-by: manasmanohar <[email protected]>

Author: manasmanohar

src/components/Community.js

@@ -10,7 +10,7 @@ export const Community = () => {
         Are you curious, 🤔 or do you have questions burning in your mind? 🔥
         Look no further! Join our lively Community Forum where you can:
       </p>
-      <ul className="grid gap-6  sm:grid-cols-2 xl:gap-8">
+      <ul className="grid gap-6  sm:grid-cols-2 xl:gap-8 list-none">
         {/*<li>*/}
         {/*  <a*/}
         {/*    href="https://community.keploy.io/"*/}
@@ -47,6 +47,9 @@ export const Community = () => {
             <svg
               fill="currentColor"
               className="h-12 w-12 flex-none text-red-500 "
+              // Hotfix: Compensate for Tailwind preflight removal causing icon to be cropped
+              viewBox="0 0  48 48"
+              
             >
               <rect width="48" height="48" rx="12" />
               <path
@@ -95,6 +98,8 @@ export const Community = () => {
             <svg
               fill="currentColor"
               className="h-12 w-12 flex-none text-black "
+              // Hotfix: Compensate for Tailwind preflight removal causing icon to be cropped
+              viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
               <path

src/css/custom.css

@@ -11,12 +11,20 @@
 @tailwind utilities;
 
 :root {
+  /* Hotfix: Changed primary color to black to resolve conflict with Docusaurus' default primary orange after disabling Tailwind preflight CSS. Added font size and line height adjustments to compensate for the removal of Tailwind preflight. */
+ 
+  /* --ifm-color-primary-lighter: #ffb575; */
+  font-size:18px;
+  line-height: 1.6;
+  --ifm-color-primary: #000;
+
+  --ifm-color-primary-lighter: #FFF;
   --ifm-color-primary: #ff914d;
   --ifm-color-primary-dark: #e67643;
   --ifm-color-primary-darker: #c95919;
   --ifm-color-primary-darkest: #be2c1b;
   --ifm-color-primary-light: #ffd0a0;
-  --ifm-color-primary-lighter: #ffb575;
+  
   --ifm-color-primary-lightest: #ffceb1;
   --ifm-code-font-size: 95%;
   --doc-sidebar-width: 275px !important;
@@ -27,12 +35,17 @@
 }
 
 html[data-theme="dark"] {
+  /* Hotfix: Changed 'ifm-color-primary-lighter' to white to resolve conflict with Docusaurus' default color after disabling Tailwind preflight CSS. */
+  
+
+  /* --ifm-color-primary-lighter: #ffb575; */
+  --ifm-color-primary-lighter: #FFF; 
+   
   --ifm-color-primary: #ff914d;
   --ifm-color-primary-dark: #e67643;
   --ifm-color-primary-darker: #c95919;
   --ifm-color-primary-darkest: #be2c1b;
   --ifm-color-primary-light: #ffd0a0;
-  --ifm-color-primary-lighter: #ffb575;
   --ifm-color-primary-lightest: #ffceb1;
   --ifm-link-color: var(--ifm-color-primary-lighter);
   --ifm-menu-color-active: var(--ifm-color-primary-lighter);
@@ -97,6 +110,10 @@ html[data-theme="light"] {
   @apply inline;
 }
 
+/* Hotfix: Remove extra margin-bottom on community links subtext in the home page due to Tailwind preflight removal */
+h3{
+  margin-bottom: 0.1rem;
+}
 h1,
 h2,
 h3,

tailwind.config.js

@@ -13,10 +13,10 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx}",
     "./src/theme/**/*.{js,ts,jsx,tsx}",
   ],
-  // corePlugins: {
-  //   // preflight: false, // to use Docusaurus base styles
-  //   // container: false, // use container style from docusaurus
-  // },
+  corePlugins: {
+    preflight: false, // to use Docusaurus base styles
+    // container: false, // use container style from docusaurus
+  },
   // // important: "#tailwind", // incrementally adopt Tailwind by wrapping pages with <div id="tailwind"> </div>
   theme: {
     extend: {
@@ -102,7 +102,8 @@ module.exports = {
       },
       fontFamily: {
         light: ["Roboto Light", "sans"],
-        bold: ["Roboto Bold", "sans"],
+        // hotfix: Remove "Roboto Bold" to prevent fallback to "Times" font due to a potential CSS conflict.
+        // bold: ["Roboto Bold", "sans"],
       },
       keyframes: {
         "fade-in-down": {