Cant apply custom styles to UButton Config

[SvenBudak]

Environment

• Operating System: Windows_NT
• Node Version: v18.17.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: npm@9.6.7
• Builder: -
• User Config: devtools, modules, ui, viewport
• Runtime Modules: nuxt-directus@5.6.0, @nuxt/ui@2.10.0, @nuxtjs/color-mode@3.3.0, nuxt-viewport@2.0.6
• Build Modules: -

Version

2.10.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-ocfxhc?file=app.vue

Description

I've encountered a problem while configuring the styles and I think it might be a bug:

export default <Partial<Config>>{
    theme: {
        fontSize: {
            'h1': '3.815rem',
            'h2': '3.052rem',
            'h3': '2.441rem',
            'h4': '1.953rem',
            'h5': '1.563rem',
            'h6': '1.25rem',
            'ultra-large': '1.953rem',
            'very-large': '1.563rem',
            'large': '1.25rem',
            'base': '1rem',
            'small': '0.8rem',
            'very-small': '0.64rem',
            'ultra-small': '0.512rem',
        },
    }
}

and I want to adjust my UButton styles:

export default defineAppConfig({
    ui: {
        strategy: 'override',
        primary: 'animeSector',
        button: {
            size: {
                normal: 'ultra-large h-9',
                large: 'ultra-large h-14',
            },
        }
    }
})

When I set size to normal, it takes the h-9, but my custom ultra-large class is just not rendered into the DOM... Why? Is it because it's a class name that doesn't exist by default in Tailwind?

I've already tried it with a safelist, but that didn't help either...

Additional context

No response

Logs

No response

[benjamincanac]

There is indeed an issue with tailwind-merge and custom classes, it needs to be configured so it identifies new classes, here is more infos there: dcastil/tailwind-merge#302.

Why not stick with the default naming of Tailwind like 2xs, xs, lg, etc?

[SvenBudak]

Why not stick with the default naming of Tailwind like 2xs, xs, lg, etc?

Due to our very strict styleguide, which has been used for years in different frameworks with various UI kits, we have specific requirements. We need to ensure that anyone familiar with our stylekit in Angular can use it in Nuxt 3 without any differences. This means that all attributes must have the same names, and all styles must look identical. Additionally, we want to prevent any developers collaborating on this project from mistakenly using button xs when our standard is only md (default) and lg (large). For this reason, we are not extending in the Tailwind config; instead, we are deliberately overwriting the defaults to completely eliminate them. Unfortunately, whether we can continue working with Nuxt UI or need to develop our own UI kit (which I'd like to avoid) depends on our project lead's approval.

Is tailwind-merge a package that I need to install and configure myself, or does it run automatically in the background with Nuxt UI? In the app.config, I'm using the strategy: 'override' because I want to be certain that only the styles I've defined are being used.

I will pass along the issue you linked to a colleague, as I'm only responsible for the UI / HTML and CSS and not proficient in TypeScript. Thanks for sharing that!

Will there be a fix soon that will allow my issue to be resolved on the fly, i.e., without a workaround?

I've also noticed that I cannot define the class font-bold in "base": 'baestyles...' nor does font-bold seem to be rendered in the DOM, even though it's a standard Tailwind class.

[SvenBudak]

@benjamincanac

Wouldn't it make sense to add another strategy mode? This could be named "standalone". This strategy mode would simply take the classes without any additional logic and checks and write them as a class in the button. To ensure Tailwind includes these classes in the build, one could create a temporary HTML file in the serve/build script containing a div with all these classes. This file could be automatically deleted after the build process is completed. (Just as an idea)

[solamichealolawale]

This issue is not only for button, it's for all of the components and it's all about custom config. More like the duplicate of #858 and #902

[benjamincanac]

@solamichealolawale #858 and #902 were about prop autocomplete, it's not related.

I have a solution for this, it would require to extend/override the tailwind-merge config.

Here's how you would solve it for your reproduction:

import tailwindConfig from './tailwind.config'

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool',
    button: {
      size: {
        normal: 'text-base h-9',
        large: 'text-large h-14'
      },
      padding: {
        normal: 'px-4',
        large: 'px-8'
      }
    },
    tailwindMerge: {
      override: {
        classGroups: {
          'font-size': [{ text: Object.keys(tailwindConfig.theme?.fontSize || {}) }]
        }
      }
    }
  }
})

I'll make a PR to allow this, can you confirm that you still need it @SvenBudak and that it would solve your issue?

I'd recommend reading this: https://github.com/dcastil/tailwind-merge/blob/v2.1.0/docs/configuration.md#usage-with-custom-tailwind-config and https://github.com/dcastil/tailwind-merge/blob/v2.1.0/docs/configuration.md#extending-the-tailwind-merge-config

[moshetanzer]

@SvenBudak As no reply has been recieved and @benjamincanac has given you a solution, am going to close this issue assuming that you were sorted. If this is not the case feel free to tag @benjamincanac or me and we this will be re-evaluated

[SvenBudak]

@moshetanzer I'm sorry, but we felt too restricted and therefore switched to Angular. With Angular 17, the SSR has been revised and now offers an excellent developer experience. Therefore, I am no longer able to conduct any tests. Our old codebase that we started no longer exists.

[moshetanzer]

Great.

[blaqnativity]

First create an app.config.ts file in your root dir with this config;

export default defineAppConfig({
ui: {
primary: "black",
gray: "cool",
},
});

lastly, in your tailwind.config file, add your custom colors like this;

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

const config: Partial = {
theme: {
extend: {
colors: {
purple: {
100: "#faf5ff",
200: "#f3e8ff",
300: "#e9d5ff",
400: "#e879f9",
500: "#d946ef",
600: "#7e22ce",
700: "#6b21a8",
800: "#6b21a8",
900: "#581c87",
950: "#3b0764",
},
black: {
100: "#f6f6f6",
200: "#e7e7e7",
300: "#d1d1d1",
400: "#888888",
500: "#6d6d6d",
600: "#5d5d5d",
700: "#4f4f4f",
800: "#454545",
900: "#3d3d3d",
950: "#000000",
},
},
},
},
};

export default config;

worked out pretty well for me in changing my theme colors

[stijns96]

Trying to add the code below to the ui object in my app.config.ts, but is is breaking a worker.

tailwindMerge: {
  override: {
    theme: {
      spacing: [...Object.keys(theme.spacing)],
    },
  },
},

[worker reload] [worker init] /Users/stijn/projects/github/personal/ways-studio/.nuxt/dev/index.mjs failed