Scope Tailwind base variables to container class

package.json

@@ -73,6 +73,7 @@
     "postcss-import": "^16.0.1",
     "postcss-mixins": "^9.0.4",
     "postcss-nested-import": "^1.3.0",
+    "postcss-prefix-selector": "^2.1.1",
     "postcss-replace": "^2.0.1",
     "postcss-url": "^10.1.3",
     "tailwindcss": "^3.4.1",

postcss.config.cjs

@@ -1,21 +1,48 @@
-/* eslint-disable */
+function scopePreflight(container = '.vuepal-root') {
+  const creator = () => ({
+    postcssPlugin: 'scope-preflight',
+    Once(root) {
+      root.walkRules((rule) => {
+        if (!rule.selector) return
+        const s = rule.selector.replace(/\s+/g, ' ').trim()
+        const isRootOrHost =
+          /^:root(?:\s*,\s*:host)?$|^:host(?:\s*,\s*:root)?$/.test(s)
+        const isUniversal =
+          /^\*,\s*::?before,\s*::?after(?:,\s*::backdrop)?$/.test(s)
+        const isBackdrop = /^::backdrop$/.test(s)
+
+        if (isRootOrHost) {
+          rule.selector = container
+        } else if (isUniversal) {
+          rule.selector = `${container} *, ${container} ::before, ${container} ::after`
+        } else if (isBackdrop) {
+          rule.selector = `${container} ::backdrop`
+        }
+      })
+    },
+  })
+  creator.postcss = true
+  return creator
+}
+
 module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'postcss-mixins': {},
-    'postcss-nested-import': {},
-    'tailwindcss/nesting': {},
-    'postcss-url': {},
-    tailwindcss: {},
-    cssnano: {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-mixins'),
+    require('postcss-nested-import'),
+    require('tailwindcss/nesting'),
+    require('postcss-url'),
+    require('tailwindcss'),
+    require('cssnano')({
       preset: 'default',
-    },
-    'postcss-replace': {
+    }),
+    require('postcss-replace')({
       pattern: /(--tw|\*, ::before, ::after)/g,
       data: {
         '--tw': '--vuepal-tw',
         '*, ::before, ::after': ':root',
       },
-    },
-  },
+    }),
+    scopePreflight('.vuepal-root'),
+  ],
 }

src/runtime/components/VuepalAdminToolbar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="vuepal-admin-toolbar"
+    class="vuepal-admin-toolbar vuepal-root"
     :style="style"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"

src/runtime/components/VuepalLocalTasks/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vuepal-local-tasks">
+  <div class="vuepal-local-tasks vuepal-root">
     <ul>
       <li
         v-for="task in tasks"

tailwind.config.js

@@ -5,7 +5,8 @@ module.exports = {
     preflight: false,
     container: false,
   },
-  content: [], // This is important, else unwanted styles will leak.
+  important: '.vuepal-root',
+  content: [],
   theme: {
     extend: {
       transitionTimingFunction: {

tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json",
   "exclude": ["dist", "node_modules", "playground"]
 }