Home Original page

feat(module): add `theme.prefix` option (#5341) · nuxt/ui@7fca5d7

@@ -256,7 +256,7 @@ Use the `prefix` option to change the prefix of the components.

256256257257

- Default: `U`{lang="ts-type"}

258258259-

```ts [nuxt.config.ts]

259+

```ts [nuxt.config.ts] {4-6}

260260

export default defineNuxtConfig({

261261

modules: ['@nuxt/ui'],

262262

css: ['~/assets/css/main.css'],

@@ -272,7 +272,7 @@ Use the `fonts` option to enable or disable the [`@nuxt/fonts`](https://github.c

272272273273

- Default: `true`{lang="ts-type"}

274274275-

```ts [nuxt.config.ts]

275+

```ts [nuxt.config.ts] {4-6}

276276

export default defineNuxtConfig({

277277

modules: ['@nuxt/ui'],

278278

css: ['~/assets/css/main.css'],

@@ -288,7 +288,7 @@ Use the `colorMode` option to enable or disable the [`@nuxt/color-mode`](https:/

288288289289

- Default: `true`{lang="ts-type"}

290290291-

```ts [nuxt.config.ts]

291+

```ts [nuxt.config.ts] {4-6}

292292

export default defineNuxtConfig({

293293

modules: ['@nuxt/ui'],

294294

css: ['~/assets/css/main.css'],

@@ -304,7 +304,7 @@ Use the `theme.colors` option to define the dynamic color aliases used to genera

304304305305

- Default: `['primary', 'secondary', 'success', 'info', 'warning', 'error']`{lang="ts-type" class="inline"}

306306307-

```ts [nuxt.config.ts]

307+

```ts [nuxt.config.ts] {4-8}

308308

export default defineNuxtConfig({

309309

modules: ['@nuxt/ui'],

310310

css: ['~/assets/css/main.css'],

@@ -326,7 +326,7 @@ Use the `theme.transitions` option to enable or disable transitions on component

326326327327

- Default: `true`{lang="ts-type"}

328328329-

```ts [nuxt.config.ts]

329+

```ts [nuxt.config.ts] {4-8}

330330

export default defineNuxtConfig({

331331

modules: ['@nuxt/ui'],

332332

css: ['~/assets/css/main.css'],

@@ -348,7 +348,7 @@ Use the `theme.defaultVariants` option to override the default `color` and `size

348348349349

- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}

350350351-

```ts [nuxt.config.ts]

351+

```ts [nuxt.config.ts] {4-11}

352352

export default defineNuxtConfig({

353353

modules: ['@nuxt/ui'],

354354

css: ['~/assets/css/main.css'],

@@ -363,13 +363,71 @@ export default defineNuxtConfig({

363363

})

364364

```

365365366+

### `theme.prefix` :badge{label="Soon"}

367+368+

Use the `theme.prefix` option to configure the same prefix you set on your Tailwind CSS import. This ensures Nuxt UI components use the correct prefixed utility classes and CSS variables.

369+370+

::code-group

371+372+

```ts [nuxt.config.ts] {4-8}

373+

export default defineNuxtConfig({

374+

modules: ['@nuxt/ui'],

375+

css: ['~/assets/css/main.css'],

376+

ui: {

377+

theme: {

378+

prefix: 'tw'

379+

}

380+

}

381+

})

382+

```

383+384+

```css [app/assets/css/main.css] {1}

385+

@import "tailwindcss" prefix(tw);

386+

@import "@nuxt/ui";

387+

```

388+389+

::

390+391+

::warning{to="https://fonts.nuxt.com/get-started/configuration#processcssvariables"}

392+

You might need to enable `fonts.processCSSVariables` to use the prefix option with the `@nuxt/fonts` module:

393+394+

```ts [nuxt.config.ts] {9-11}

395+

export default defineNuxtConfig({

396+

modules: ['@nuxt/ui'],

397+

css: ['~/assets/css/main.css'],

398+

ui: {

399+

theme: {

400+

prefix: 'tw'

401+

}

402+

},

403+

fonts: {

404+

processCSSVariables: true

405+

}

406+

})

407+

```

408+

::

409+410+

This will automatically prefix all Tailwind utility classes and CSS variables in Nuxt UI component themes:

411+412+

```html

413+

<!-- Without prefix -->

414+

<button class="px-2 py-1 text-xs hover:bg-primary/75">Button</button>

415+416+

<!-- With prefix: tw -->

417+

<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-primary/75">Button</button>

418+

```

419+420+

::note{to="https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option" target="_blank"}

421+

Learn more about using a prefix in the Tailwind CSS documentation.

422+

::

423+366424

### `mdc`

367425368426

Use the `mdc` option to force the import of Nuxt UI `<Prose>` components even if `@nuxtjs/mdc` or `@nuxt/content` is not installed.

369427370428

- Default: `false`{lang="ts-type"}

371429372-

```ts [nuxt.config.ts]

430+

```ts [nuxt.config.ts] {4-6}

373431

export default defineNuxtConfig({

374432

modules: ['@nuxt/ui'],

375433

css: ['~/assets/css/main.css'],

@@ -385,7 +443,7 @@ Use the `content` option to force the import of Nuxt UI `<Prose>` and `<UContent

385443386444

- Default: `false`{lang="ts-type"}

387445388-

```ts [nuxt.config.ts]

446+

```ts [nuxt.config.ts] {4-6}

389447

export default defineNuxtConfig({

390448

modules: ['@nuxt/ui'],

391449

css: ['~/assets/css/main.css'],

@@ -404,7 +462,7 @@ Use the `experimental.componentDetection` option to enable automatic component d

404462405463

**Enable automatic detection:**

406464407-

```ts [nuxt.config.ts]

465+

```ts [nuxt.config.ts] {4-8}

408466

export default defineNuxtConfig({

409467

modules: ['@nuxt/ui'],

410468

css: ['~/assets/css/main.css'],

@@ -418,7 +476,7 @@ export default defineNuxtConfig({

418476419477

**Include additional components for dynamic usage:**

420478421-

```ts [nuxt.config.ts]

479+

```ts [nuxt.config.ts] {4-8}

422480

export default defineNuxtConfig({

423481

modules: ['@nuxt/ui'],

424482

css: ['~/assets/css/main.css'],