From 62f71f3fbccb294595b8ea549115f40300b66af6 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Mon, 3 Mar 2025 15:36:36 +0100 Subject: [PATCH] docs(getting-started): improve --- docs/content/1.getting-started/1.index.md | 4 +- .../2.installation/1.nuxt.md | 22 ++++++----- docs/content/1.getting-started/3.theme.md | 38 +++++++++---------- .../1.getting-started/4.icons/1.nuxt.md | 5 +-- docs/content/1.getting-started/5.fonts.md | 4 +- .../1.getting-started/6.color-mode/1.nuxt.md | 2 + .../1.getting-started/7.i18n/1.nuxt.md | 1 + 7 files changed, 41 insertions(+), 35 deletions(-) diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md index b3fad374..6fbdfd7f 100644 --- a/docs/content/1.getting-started/1.index.md +++ b/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"} -Learn how to upgrade your project from Tailwind CSS v3 to v4. +::note{to="https://tailwindcss.com/docs/upgrade-guide#changes-from-v3" target="_blank" aria-label="Tailwind CSS v4 upgrade guide"} +Learn about all the breaking changes in Tailwind CSS v4. :: ### Tailwind Variants diff --git a/docs/content/1.getting-started/2.installation/1.nuxt.md b/docs/content/1.getting-started/2.installation/1.nuxt.md index 7f4bd7a0..a13184eb 100644 --- a/docs/content/1.getting-started/2.installation/1.nuxt.md +++ b/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 -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] +```ts [nuxt.config.ts] {3} 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 diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index b683a8ca..28c54865 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/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"; diff --git a/docs/content/1.getting-started/4.icons/1.nuxt.md b/docs/content/1.getting-started/4.icons/1.nuxt.md index a2157008..b7b32f31 100644 --- a/docs/content/1.getting-started/4.icons/1.nuxt.md +++ b/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: [ - '@nuxt/ui' - ], + modules: ['@nuxt/ui'], + css: ['~/assets/css/main.css'], icon: { customCollections: [{ prefix: 'custom', diff --git a/docs/content/1.getting-started/5.fonts.md b/docs/content/1.getting-started/5.fonts.md index bb49922c..220b1529 100644 --- a/docs/content/1.getting-started/5.fonts.md +++ b/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"; diff --git a/docs/content/1.getting-started/6.color-mode/1.nuxt.md b/docs/content/1.getting-started/6.color-mode/1.nuxt.md index b58bc52b..e4a07514 100644 --- a/docs/content/1.getting-started/6.color-mode/1.nuxt.md +++ b/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 } diff --git a/docs/content/1.getting-started/7.i18n/1.nuxt.md b/docs/content/1.getting-started/7.i18n/1.nuxt.md index 39b6f9b7..8a7838bc 100644 --- a/docs/content/1.getting-started/7.i18n/1.nuxt.md +++ b/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',