Nuxt•9mo ago

[nuxt ui] theming: which config?

edit: while working on other things, somehow the changes took over. They are working in tailwind.config.ts However, maybe someone can explain why there are so many options and why one should use one over the other. original post: Hi everybody! I'm working with nuxt ui and tailwind in general for the first time. All great so far and i like it. Unfortunately when i try to override the default font-size it doesn't apply. I tried putting it in nuxt.config.ts as well as app.config.ts and also tried with tailwind.config.ts. All three of those are mentioned in the nuxtUI-theming section. tailwind.config.ts

import type { Config } from "tailwindcss"
import defaultTheme from "tailwindcss/defaultTheme"

export default <Partial<Config>>{
    theme: {
      fontSize: {
        sm: ["10px", "20px"],
        base: ["14px", "24px"],
        lg: ["16px", "28px"],
        xl: ["18px", "32px"],
      },
    },
}

import type { Config } from "tailwindcss"
import defaultTheme from "tailwindcss/defaultTheme"

export default <Partial<Config>>{
    theme: {
      fontSize: {
        sm: ["10px", "20px"],
        base: ["14px", "24px"],
        lg: ["16px", "28px"],
        xl: ["18px", "32px"],
      },
    },
}

app.config.ts

export default defineAppConfig({
  ui: {
    theme: {
      fontSize: {
        sm: ["10px", "20px"],
        base: ["14px", "24px"],
        lg: ["16px", "28px"],
        xl: ["18px", "32px"],
      },
    },
  },
})

export default defineAppConfig({
  ui: {
    theme: {
      fontSize: {
        sm: ["10px", "20px"],
        base: ["14px", "24px"],
        lg: ["16px", "28px"],
        xl: ["18px", "32px"],
      },
    },
  },
})

nuxt.config.ts

export default defineNuxtConfig({
  //
  ui: {
    fontSize: {
      sm: ["10px", "20px"],
      base: ["14px", "24px"],
      lg: ["16px", "28px"],
      xl: ["18px", "32px"],
    },
  },
})

export default defineNuxtConfig({
  //
  ui: {
    fontSize: {
      sm: ["10px", "20px"],
      base: ["14px", "24px"],
      lg: ["16px", "28px"],
      xl: ["18px", "32px"],
    },
  },
})

Nothing of those seem to work, also tried with defaultTheme in tailwind.config.ts Can someone point me in the right direction? Thanks in advance!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

[nuxt ui] theming: which config?