Closed SvenBudak closed 2 months ago
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: https://github.com/dcastil/tailwind-merge/issues/302.
Why not stick with the default naming of Tailwind like 2xs
, xs
, lg
, etc?
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.
@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)
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 https://github.com/nuxt/ui/issues/858 and https://github.com/nuxt/ui/issues/902
@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
@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
@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.
Great.
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
export default config;
worked out pretty well for me in changing my theme colors
Environment
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:
and I want to adjust my UButton styles:
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