Fix!: scoped base tailwind styles to avoid conflicts

Author: Akalanka47000

bun.lockb

@@ -31,7 +31,7 @@ const options = {
   },
   plugins: [cleaner],
   legalComments: "none",
-  external: ["react", "react-dom", "@dreamworld/addon-redux"]
+  external: ["react", "react-dom", "@dreamworld/addon-redux", "tailwindcss-scoped-preflight"]
 };
 
 build({

esbuild.config.js

@@ -116,8 +116,9 @@
     "sonner": "1.5.0",
     "storybook": "7.3.2",
     "storybook-addon-deep-controls": "0.2.1",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.6",
     "tailwindcss-animate": "1.0.6",
+    "tailwindcss-scoped-preflight": "3.4.3",
     "tsc-alias": "1.8.8",
     "vite": "4.5.2"
   },
@@ -127,5 +128,6 @@
   },
   "patchedDependencies": {
     "[email protected]": "patches/[email protected]"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package.json

@@ -1,4 +1,5 @@
 import { Provider } from "react-redux";
+import { twMerge } from "tailwind-merge";
 import { default as Core, TooltipProvider } from "@/components";
 import { store } from "@/store";
 import { type ISTKProps } from "./types";
@@ -11,7 +12,12 @@ export const SeatToolkit = (props: ISTKProps) => {
   return (
     <Provider store={store}>
       <TooltipProvider>
-        <Core {...props} />
+        <div
+          className={twMerge("stk-core", props.styles?.core?.container?.className)}
+          style={props.styles?.core?.container?.properties}
+        >
+          <Core {...props} />
+        </div>
       </TooltipProvider>
     </Provider>
   );

src/index.tsx

@@ -4,6 +4,7 @@ body,
 #storybook-root {
   min-height: 100% !important;
   height: 100% !important;
+  font-family: "Inter", sans-serif !important;
 }
 body {
   margin-right: 0px !important;

src/styles/storybook.css

@@ -87,6 +87,7 @@ export interface IStyles {
     };
   };
   core?: {
+    container?: IStyle;
     button?: IStyle;
   };
 }

src/types/styles.ts

@@ -1,4 +1,5 @@
 import animate from "tailwindcss-animate";
+import { isolateInsideOfContainer, scopedPreflightStyles } from "tailwindcss-scoped-preflight";
 
 export const screens = {
   xs: "400px",
@@ -26,5 +27,10 @@ export default {
       }
     }
   },
-  plugins: [animate]
+  plugins: [
+    animate,
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer(".stk-core")
+    })
+  ]
 };