docs: explain generated css

Author: jagoral

Diff for: docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md

@@ -199,8 +199,21 @@ In your Nuxt app, add custom CSS variables in your style.scss:
 ```
 ::
 
-::info
-For more information on using CSS variables with Tailwind, see the [Tailwind CSS documentation](https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables).
+::tip Using CSS Variables with Tailwind
+The CSS variables we defined can be used with Tailwind's color system. For example, `bg-primary-500` will use the store-specific primary color defined in the CSS variables. For more information, see the [Tailwind CSS documentation](https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables).
+::
+
+::tip Understanding Generated CSS
+When using store-specific variants like `electronics:!bg-primary-600`, Tailwind generates scoped CSS rules. For example:
+
+```css
+.electronics .electronics\:\!bg-primary-600 {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(46 106 230 / 1 !important) !important;
+}
+```
+
+This ensures the styles only apply when two conditions are met: the parent element must have the `.electronics` class and the target element must have the `electronics:!bg-primary-600` class.
 ::
 
 ## Setting Up the Storefront
@@ -575,6 +588,19 @@ Then use these variants (`electronics:`, `apparel:`, etc.) in your components:
 The CSS variables we defined can be used with Tailwind's color system. For example, `bg-primary-500` will use the store-specific primary color defined in the CSS variables. For more information, see the [Tailwind CSS documentation](https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables).
 ::
 
+::tip Understanding Generated CSS
+When using store-specific variants like `electronics:!bg-primary-600`, Tailwind generates scoped CSS rules. For example:
+
+```css
+.electronics .electronics\:\!bg-primary-600 {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(46 106 230 / 1 !important) !important;
+}
+```
+
+This ensures the styles only apply when two conditions are met: the parent element must have the `.electronics` class and the target element must have the `electronics:!bg-primary-600` class.
+::
+
 ## Conditional Components
 
 There are two main approaches to handling store-specific components: