Properly isolate tailwind to prevent conflicts with other tailwind projects

.storybook/decorators/RootClass.tsx

@@ -0,0 +1,9 @@
+import { Decorator } from "@storybook/react"
+
+export const withRootClass: Decorator = (Story) => {
+    return (
+        <div className="rfs-root">
+            <Story />
+        </div>
+    )
+}

.storybook/preview.ts

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react"
 import { withThemeByClassName } from "@storybook/addon-themes"
 
 import "../src/index.css"
+import { withRootClass } from "./decorators/RootClass"
 
 const preview: Preview = {
     parameters: {
@@ -24,7 +25,8 @@ const preview: Preview = {
                 dark: "dark"
             },
             defaultTheme: "light"
-        })
+        }),
+        withRootClass
     ]
 }
 

README.md

@@ -62,7 +62,7 @@ Then simply pass your custom component to the search component.
 ### Styling
 
 Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS.
-
+More information can be found in the Storybook.
 
 ## Contributing
 

package.json

@@ -31,7 +31,7 @@
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "storybook:test": "test-storybook",
-    "build": "rm -rf ./dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css && cp ./src/elastic-ui.css ./dist",
+    "build": "rm -rf ./dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css --postcss && cp ./src/elastic-ui.css ./dist",
     "test": ""
   },
   "dependencies": {
@@ -98,11 +98,13 @@
     "globals": "^16.0.0",
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
+    "postcss-nested": "^7.0.2",
     "prettier": "^3.4.2",
     "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.16",
     "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-scoped-preflight": "^3.4.12",
     "ts-loader": "^9.5.2",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.7.3",

postcss-scoped.cjs

@@ -0,0 +1,26 @@
+/**
+ * PostCSS plugin for rewriting some selectors in tailwindcss to prevent overspill of tailwind variables into the
+ * surrounding application. There are more isolation mechanics in tailwind.config.js
+ */
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => ({
+    postcssPlugin: "postcss-scoped",
+    Once(root) {
+        root.walkRules((rule) => {
+            // Rewrite global variable declaration to be only present on elements inside .rfs-root
+            if (rule.selector === "*, ::before, ::after") {
+                rule.selectors = rule.selectors.map((s) => (s === "*" ? "*:where(.rfs-root,.rfs-root *)" : ":where(.rfs-root,.rfs-root *)" + s))
+            }
+
+            // Rewrite backdrop variable declaration to be only present on backdrops inside .rfs-root
+            if (rule.selector === "::backdrop") {
+                rule.selectors = rule.selectors.map((s) => ":where(.rfs-root,.rfs-root *)" + s)
+            }
+        })
+    }
+})
+
+module.exports.postcss = true

postcss.config.cjs

@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested"), require("./postcss-scoped.cjs")]
 }

src/components/ReactSearchComponent.tsx

@@ -128,6 +128,7 @@ export function ReactSearchComponent({
                                 return (
                                     <ErrorBoundary view={ErrorView}>
                                         <Layout
+                                            className={"rfs-root"}
                                             header={
                                                 <SearchBox
                                                     autocompleteMinimumCharacters={3}

src/components/ui/carousel.tsx

@@ -135,7 +135,7 @@ const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
     const { carouselRef, orientation } = useCarousel()
 
     return (
-        <div ref={carouselRef} className="rfs-overflow-hidden">
+        <div ref={carouselRef} className="rfs-root rfs-overflow-hidden">
             <div ref={ref} className={cn("rfs-flex", orientation === "horizontal" ? "rfs--ml-4" : "rfs--mt-4 rfs-flex-col", className)} {...props} />
         </div>
     )

src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "rfs-fixed rfs-inset-0 rfs-z-50 rfs-bg-black/80 rfs- data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0",
+            "rfs-root rfs-fixed rfs-inset-0 rfs-z-50 rfs-bg-black/80 rfs- data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0",
             className
         )}
         {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "rfs-fixed rfs-left-[50%] rfs-top-[50%] rfs-z-50 rfs-grid rfs-w-full rfs-max-w-lg rfs-translate-x-[-50%] rfs-translate-y-[-50%] rfs-gap-4 rfs-border rfs-bg-background rfs-p-6 rfs-shadow-lg rfs-duration-200 data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[state=closed]:rfs-slide-out-to-left-1/2 data-[state=closed]:rfs-slide-out-to-top-[48%] data-[state=open]:rfs-slide-in-from-left-1/2 data-[state=open]:rfs-slide-in-from-top-[48%] sm:rfs-rounded-lg",
+                "rfs-root rfs-fixed rfs-left-[50%] rfs-top-[50%] rfs-z-50 rfs-grid rfs-w-full rfs-max-w-lg rfs-translate-x-[-50%] rfs-translate-y-[-50%] rfs-gap-4 rfs-border rfs-bg-background rfs-p-6 rfs-shadow-lg rfs-duration-200 data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[state=closed]:rfs-slide-out-to-left-1/2 data-[state=closed]:rfs-slide-out-to-top-[48%] data-[state=open]:rfs-slide-in-from-left-1/2 data-[state=open]:rfs-slide-in-from-top-[48%] sm:rfs-rounded-lg",
                 className
             )}
             {...props}