Add a note about Overriding Control Panel CSS

Author: jaygeorge

content/collections/pages/vite-tooling.md

@@ -134,6 +134,14 @@ If you want to use [Tailwind CSS](https://tailwindcss.com) in your addon's compo
 
     You don't need to `@import "tailwindcss"`, as it'll be imported by Statamic's `tailwind.css` file.
 
+#### Overriding Control Panel CSS
+
+We organize our CSS using [cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#issues_cascade_layers_can_solve) to help manage styling priorities and avoid conflicts. Internally, we define layers in this order: `@layer base, addon-theme, addon-utilities, components, utilities, ui, ui-states;`. Any CSS you add to your addon will automatically go into the `addon-utilities` layer.
+
+We intentionally place addon layers below Statamic’s core layers. This prevents addon styles from unintentionally overriding Statamic's core styles—for instance, an addon's `bg-something` class won’t interfere with Statamic's `dark:bg-something`, which could otherwise cause visual issues like incorrect background colors.
+
+If you do need to explicitly override Statamic’s styles, you can use the Tailwind `!` prefix (e.g., `!lg:grid-cols-3`) to force your class to take priority, which is `!important` under the hood. However, use this technique sparingly, as it will override Statamic’s intended default styling and could introduce unintended side effects.
+
 ### Service Provider
 Here's `ServiceProvider.php`, which is the PHP entry point to your addon. You should add a `$vite` property which mirrors the paths in your `vite.config.js` file.