N
Nuxt•3d ago
OhNoPlata

Nuxt UI Pro defaults

Hey! When using Nuxt UI Pro with nuxt font+tailwin, If i want to specify what font is used for say a h3 in the components, is there a way to do this globally?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @OhNoPlata. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can specify the font for components like h3 globally when using Nuxt UI Pro with Nuxt Font and Tailwind. Here's how you can do it: 1. First, set up your font using Nuxt Font in your nuxt.config.ts: 
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/ui',
    '@nuxt/fonts'
  ],
  // Configure your font here
})
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/ui',
    '@nuxt/fonts'
  ],
  // Configure your font here
})
2. Then, create a tailwind.config.ts file to override the default font family: 
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['YourChosenFont', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['YourChosenFont', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}
3. Finally, you can customize the components globally by modifying your app.config.ts: 
export default defineAppConfig({
  ui: {
    // Customize your components here
    prose: {
      h3: 'font-yourChosenFont' // Apply your chosen font to h3
    }
  }
})
export default defineAppConfig({
  ui: {
    // Customize your components here
    prose: {
      h3: 'font-yourChosenFont' // Apply your chosen font to h3
    }
  }
})
This approach allows you to set default styles for components across your entire Nuxt UI Pro application. Nuxt UI Pro Theming provides more details on customizing components globally. Nuxt Docs on Styling offers additional information on working with fonts in Nuxt applications. Remember to replace 'YourChosenFont' with the actual font you want to use. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@365967956401979394> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?