arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +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

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

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