quasar helpers

src/personal_mcp/docs/skills/nicegui/references/styling-and-customization.md

@@ -12,7 +12,7 @@ Increase the customization level only when the previous source does not expose w
 2. Inspect the NiceGUI element function or class constructor.
 3. Identify the wrapped Quasar component and read its documentation.
 4. Use Quasar props, slots, and events through NiceGUI's native customization APIs.
-5. Use Tailwind classes for structural layout.
+5. Use Tailwind and Quasar utility classes for the concerns each system expresses best.
 6. Add a scoped static stylesheet for stable visual fine tuning.
 
 Stop as soon as the required behavior is supported. Do not begin by targeting Quasar's generated DOM or internal selectors.
@@ -200,6 +200,26 @@ with ui.column().classes("w-full max-w-6xl mx-auto gap-6 px-4"):
 
 Use stable width, minimum-width, and flex constraints so labels, icons, validation messages, and loaded content do not shift the surrounding layout.
 
+### Combine Tailwind With Quasar Utilities Deliberately
+
+NiceGUI's `.classes()` accepts both Tailwind utilities and the CSS helpers bundled with Quasar. Keep Tailwind as the default for application layout and responsive structure, but use Quasar utilities when they express a Quasar-owned or framework-semantic concern more directly:
+
+- [`q-m*` and `q-p*` spacing classes](https://quasar.dev/style/spacing) when spacing should follow Quasar's component scale
+- [typography helpers](https://quasar.dev/style/typography), such as `text-h6`, `text-subtitle2`, and `text-weight-medium`, for text that should follow Quasar's type system
+- [color palette classes](https://quasar.dev/style/color-palette), such as `text-primary`, `bg-positive`, and `text-negative`, so semantic colors track the palette configured by `app.colors()` or `ui.colors()`
+- [visibility helpers](https://quasar.dev/style/visibility), such as `gt-sm` and `lt-md`, when visibility should use Quasar's configured breakpoints
+- [positioning helpers](https://quasar.dev/style/positioning), such as `absolute-top-right`, when positioning content relative to a Quasar component
+
+Mix the two systems by concern, not by writing competing declarations for the same CSS property. For example, `w-full q-pa-md text-primary` uses Tailwind for width and Quasar for component-scale padding and semantic color. Do not combine `p-4` with `q-pa-md`, or Tailwind and Quasar visibility helpers, on the same element; their cascade order can make the result version-dependent and difficult to review.
+
+```python
+with ui.card().classes("w-full max-w-2xl q-pa-md"):
+    ui.label("Inventory summary").classes("text-h6 text-primary")
+    ui.label("Review required").classes("text-negative text-weight-medium")
+```
+
+Quasar utilities are global classes, so they need no Vue-specific translation before being passed to `.classes()`. Confirm the available helpers and breakpoints against the Quasar version bundled by the installed NiceGUI release.
+
 ## Fine Tuning With Static Stylesheets
 
 Move stable fine tuning into a static stylesheet after the structure and native component configuration are correct. Static stylesheets provide reusable selectors, media queries, pseudo-classes, CSS variables, and a clear cascade that inline declarations cannot provide.
@@ -430,6 +450,10 @@ Confirm that page sections do not overlap, toolbars wrap on mobile, desktop pane
     - [NiceGUI color theming](https://nicegui.io/documentation/colors)
     - [NiceGUI dark mode](https://nicegui.io/documentation/dark_mode)
     - [Quasar components](https://quasar.dev/vue-components)
+    - [Quasar spacing classes](https://quasar.dev/style/spacing)
+    - [Quasar typography helpers](https://quasar.dev/style/typography)
+    - [Quasar visibility helpers](https://quasar.dev/style/visibility)
+    - [Quasar positioning helpers](https://quasar.dev/style/positioning)
     - [Quasar color palette and runtime brand variables](https://quasar.dev/style/color-palette)
     - [Quasar dark mode](https://quasar.dev/style/dark-mode)
     - [Quasar field](https://quasar.dev/vue-components/field/)