docs(getting-started): improve

docs/content/1.getting-started/1.index.md

@@ -31,8 +31,8 @@ Nuxt UI v3 integrates the latest Tailwind CSS v4, bringing significant improveme
 - **CSS-first configuration**: A reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
 - **Designed for the modern web**: Built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.
 
-::note{to="https://tailwindcss.com/docs/upgrade-guide" target="_blank" aria-label="Tailwind CSS v4 upgrade guide"}
+::note{to="https://tailwindcss.com/docs/upgrade-guide#changes-from-v3" target="_blank" aria-label="Tailwind CSS v4 upgrade guide"}
-Learn how to upgrade your project from Tailwind CSS v3 to v4.
+Learn about all the breaking changes in Tailwind CSS v4.
 ::
 
 ### Tailwind Variants

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -56,19 +56,14 @@ export default defineNuxtConfig({
 
 #### Import Tailwind CSS and Nuxt UI in your CSS
 
-```css [assets/css/main.css]
+::code-group
+
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 ```
 
-::warning
+```ts [nuxt.config.ts] {3}
-The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
-::
-
-::tip
-Use the `css` property in your `nuxt.config.ts` to import your CSS file.
-
-```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   css: ['~/assets/css/main.css']
@@ -77,6 +72,10 @@ export default defineNuxtConfig({
 
 ::
 
+::warning
+The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
+::
+
 ::callout{icon="i-simple-icons-visualstudiocode"}
 It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
 
@@ -141,6 +140,7 @@ Use the `prefix` option to change the prefix of the components.
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     prefix: 'Nuxt'
   }
@@ -156,6 +156,7 @@ Use the `fonts` option to enable or disable the [`@nuxt/fonts`](https://github.c
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     fonts: false
   }
@@ -171,6 +172,7 @@ Use the `colorMode` option to enable or disable the [`@nuxt/color-mode`](https:/
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     colorMode: false
   }
@@ -186,6 +188,7 @@ Use the `theme.colors` option to define the dynamic color aliases used to genera
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     theme: {
       colors: ['primary', 'error']
@@ -207,6 +210,7 @@ Use the `theme.transitions` option to enable or disable transitions on component
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     theme: {
       transitions: false

docs/content/1.getting-started/3.theme.md

@@ -6,7 +6,7 @@ navigation.icon: i-lucide-swatch-book
 
 ## Tailwind CSS
 
-Nuxt UI v3 uses Tailwind CSS v4, you can read the [upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to learn how to upgrade your project from v3 to v4.
+Nuxt UI v3 uses Tailwind CSS v4, you can read the official [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) to learn about all the breaking changes.
 
 ### `@theme`
 
@@ -16,7 +16,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 #ui
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -44,7 +44,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 #ui-pro
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
@@ -86,13 +86,13 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 #ui
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
-@source "../../content";
-/* Use this if using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */
 @source "../../../content";
+/* Use this if you're not using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */
+@source "../../content";
 ```
 
 :::
@@ -100,13 +100,13 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 #ui-pro
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
-@source "../../content";
-/* Use this if using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */
 @source "../../../content";
+/* Use this if you're not using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */
+@source "../../content";
 ```
 
 :::
@@ -361,7 +361,7 @@ You can change which shade is used for each color on light and dark mode:
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -379,7 +379,7 @@ You can change which shade is used for each color on light and dark mode:
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
@@ -415,7 +415,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -433,7 +433,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
@@ -545,7 +545,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -565,7 +565,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
@@ -606,7 +606,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -620,7 +620,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 
@@ -651,7 +651,7 @@ You can customize the default container width using the default Tailwind CSS var
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -669,7 +669,7 @@ You can customize the default container width using the default Tailwind CSS var
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 

docs/content/1.getting-started/4.icons/1.nuxt.md

@@ -99,9 +99,8 @@ In your `nuxt.config.ts`, add an item in `icon.customCollections`:
 
 ```ts
 export default defineNuxtConfig({
-  modules: [
+  modules: ['@nuxt/ui'],
-    '@nuxt/ui'
+  css: ['~/assets/css/main.css'],
-  ],
   icon: {
     customCollections: [{
       prefix: 'custom',

docs/content/1.getting-started/5.fonts.md

@@ -18,7 +18,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 #ui
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 
@@ -32,7 +32,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 #ui-pro
 :::div
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss" theme(static);
 @import "@nuxt/ui-pro";
 

docs/content/1.getting-started/6.color-mode/1.nuxt.md

@@ -52,6 +52,8 @@ You can disable the `@nuxtjs/color-mode` module with the `ui.colorMode` option i
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
   ui: {
     colorMode: false
   }

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -98,6 +98,7 @@ export default defineNuxtConfig({
     '@nuxt/ui',
     '@nuxtjs/i18n'
   ],
+  css: ['~/assets/css/main.css'],
   i18n: {
     locales: [{
       code: 'de',