@nxgt/material-vue 0.2.0 → 0.3.1

package/README.md

@@ -5,49 +5,62 @@ drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + shadcn-vue (Reka UI).
 
 This package is the Vue mirror of [`@nxgt/material`](https://github.com/softistx/nxgt-material).
 
-## Nuxt
+## Styles
 
-```ts
-export default defineNuxtConfig({
-	modules: ['@nxgt/material-vue/nuxt'],
-	css: ['~/assets/css/main.css'],
-	nxgtMaterial: {
-		// prefix: 'Nxgt',
-		// css: true,
-	},
-});
-```
+Import the stylesheet **explicitly**, in your Tailwind v4 entry, right after
+`@import "tailwindcss"`:
 
 ```css
-/* app/assets/css/main.css — Tailwind v4 entry */
+/* app/assets/css/main.css */
 @import "tailwindcss";
+@import "@nxgt/material-vue/styles.css";
 ```
 
-The module:
+Nothing injects it for you, on purpose:
 
-- Injects `@import "@nxgt/material-vue/styles.css"` **into that Tailwind entry**
-  (immediately after `@import "tailwindcss"`). `@theme` / `@utility` only work
-  in the same CSS graph as Tailwind, so a separate `nuxt.options.css` entry
-  does not apply tokens.
-- Auto-imports components and composables
-- Installs Pinia when the host app has none
+- Tailwind v4 builds **one** `@theme` from a single CSS graph. `@theme` /
+  `@utility` only apply when `styles.css` is imported in the same file as
+  `@import "tailwindcss"`; a second stylesheet (for example another Nuxt
+  `css[]` entry) starts a second pipeline, and the tokens never reach the app.
+- Tailwind CSS IntelliSense reads the theme from that entry file. An explicit
+  import lets it autocomplete the library tokens (`bg-primary`,
+  `text-error-foreground`, `rounded-lg`, …) in your templates.
+
+Tailwind v4 does not scan `node_modules`. `styles.css` already declares
+`@source "../dist"`, so the utilities used inside the components are generated
+by your build: no extra `@source` needed.
+
+### Stylesheets
 
-You do **not** need to `@import "@nxgt/material-vue/styles.css"` yourself.
+| Import | What is in it |
+| --- | --- |
+| `@import "@nxgt/material-vue/styles.css"` | source Tailwind v4 tokens, `@theme`, `@utility`: **this** is what a Tailwind app imports |
+| `@import "@nxgt/material-vue"` | `style` condition of the root export → `dist/material-vue.css`: compiled, self-contained CSS (tokens + every utility the components use), for apps without Tailwind |
 
-To manage the import manually:
+Do not import both in the same app.
+
+## Nuxt
 
 ```ts
 export default defineNuxtConfig({
 	modules: ['@nxgt/material-vue/nuxt'],
-	nxgtMaterial: { css: false },
+	css: ['~/assets/css/main.css'], // imports styles.css, see above
+	vite: { plugins: [tailwindcss()] },
+	nxgtMaterial: {
+		// prefix: 'Nxgt',
+	},
 });
 ```
 
-```css
-@import "tailwindcss";
-@import "@nxgt/material-vue/styles.css";
-```
+The module:
+
+- Auto-imports components and composables
+- Installs Pinia when the host app has none
+- Pre-bundles CommonJS dependencies (`jsbarcode`) for Vite
+
+It does **not** add the stylesheet: import it yourself as shown in
+[Styles](#styles).
 
 ## Status
 
-Published on npm. Pin a version in the consumer (`^0.1.0`).
+Published on npm. Pin a version in the consumer (`^0.2.0`).

package/dist/{camera-6qqJBfXA.js → camera-MRgEC7pl.js}

@@ -1,4 +1,4 @@
-import { Dl as e, Tl as t, wl as n } from "./components-Cd9cMyAH.js";
+import { Dl as e, Tl as t, wl as n } from "./components-Cbdud8WI.js";
 import { t as r } from "./utils-Cy-ByIEo.js";
 import { r as i, t as a } from "./icon-button-Ghucx7Ah.js";
 import { n as o } from "./i18n-DXZMN9FA.js";