arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 07:50:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(getting-started): improve

Browse Source
This commit is contained in:
Benjamin Canac
2025-03-03 15:36:36 +01:00
parent 6daa8f1e31
commit 62f71f3fbc
7 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/content/1.getting-started/3.theme.md
View File

@@ -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";