Nuxt•2y 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!

Nuxt•2y ago

schmidi

[nuxt ui] theming: which config?

edit:

original post:

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!

[nuxt ui] theming: which config?

edit:

original post:

tailwind.config.ts

app.config.ts

nuxt.config.ts

Similar Threads

[nuxt ui] theming: which config?

edit:

original post:

tailwind.config.ts

app.config.ts

nuxt.config.ts

Similar Threads

Similar Threads

Similar Threads