Success or Warning classes not working

[ubermanl]

Hi!, I've found this lib interesting and tried to give it a go. While building something auto-complete suggests the classes uk-label-danger, uk-label-warning, uk-label-success but only danger seems to work. If I go to definition I see the class is there's in the sass/css/less files, but it's not getting added in the css that reaches the browser.

<span class="uk-label uk-label-success">Done</span>

Thanks! :)

[sveltecult]

Hello,

What version are you using? Shadcn by default do not have success and warning classes, so is Franken UI. I'm using the latest v0.0.12 and success and warning do not get suggested. Maybe you're using the UIkit plugin? I don't know.

EDIT: BTW, this library does not have any sass/css/less files. It's all Typescript so I don't know where do you get all those.

[ubermanl]

I'm using the latest version, and yes I have installed UIKit via NPM so I don't have to grab the one from the CDN, and I see my autocomplete is taking those classes from there.

I've assumed the classes were correct given I saw those mentioned in the label hooks section. https://www.franken-ui.dev/docs/label#available-hooks

[sveltecult]

I see where the confusion is. Franken UI is a Tailwind CSS plugin, and it is a totally different project from UIkit. Let me explain:

Consider UIkit, which I really like but it is built on top of SCSS or LESS, which I personally hate (sorry). So, I ported the entire framework to become a Tailwind CSS plugin using TypeScript. This way, I can eliminate the need for SCSS or LESS customization and leverage the Tailwind CSS ecosystem (automatic unused class purging, prose, IntelliSense, etc.). Let's call this the "base". Now that we have our base and the "hooks" are in place, we can create a theme. This is where shadcn/ui comes in. It's just a bunch of pre-configured hooks, with success and warning styles excluded (which answers your question).

If you prefer to use UIkit via NPM instead of CDN, that's cool too, but you need to discard its CSS since we don't need it. We only need its JavaScript. NPM is also my preferred setup instead of CDN, you can refer to this: https://github.com/sveltecult/franken-ui-template-laravel/blob/main/resources/js/uikit.js. You can see that I haven't imported anything from UIkit SCSS or LESS.

I hope this clears things up. Simply put, forget UIkit CSS and do not import anything from there. We only need its JavaScript.

That's why it is named "Franken UI". We're fusing two completely independent frameworks together. Best of both worlds as they say. Let me pin this issue so that anyone who is also confused can better understand Franken UI.

For those concerned about overhead and bloat, that's not an issue. Franken UI is very efficient, and any duplicated rules are merged.

If you have any more questions, please let me know. I'd be happy to answer them.

---

As for the success and warning classes taking over, either you're not using the shadcn/ui hooks or you have a UIkit Autocomplete VSCode extension installed. I bet it's the first one, you can paste your tailwind.config.js here. Here's mine for reference:

import presetQuick from "franken-ui/shadcn-ui/preset-quick";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [presetQuick()],
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
      },
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      maxWidth: {
        "8xl": "90rem",
      },
    },
  },
};

[ubermanl]

Thanks for clarifying, I'm getting a better picture of it! :) For the sake of context, I'm not using vscode, I'm on Rubymine in a rails project, so the IDE was scanning all the node_modules folder and getting me those suggestions.

After a few tests I've managed to make the uk-label-* variations.

If its of any use for future readers here's my config

import presetQuick from "franken-ui/shadcn-ui/preset-quick";

const customColors = {
    success: '#32d296',
    successText: '#fff',
    warning: '#faa05a',
    warningText: '#fff',
};

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './app/views/**/*.html.erb',
        './app/helpers/**/*.rb',
        './app/assets/stylesheets/**/*.css',
        './app/javascript/**/*.js'
    ],
    theme: {
        extend: {
            colors: {
                'success': customColors.success,
                'warning': customColors.warning,
            },
        },
    },
    presets: [
        presetQuick({
            overrides: {
                label: {
                    "hook-misc": {
                        ".uk-label-success": {
                            backgroundColor: customColors.success,
                            color: customColors.successText,
                        },
                        ".uk-label-warning": {
                            backgroundColor: customColors.warning,
                            color: customColors.warningText,
                        }
                    }
                }
            }
        }),
    ]
}

Thanks for clarifying!!

[sveltecult]

No worries mate, now we are on the same page (with pun intended 😁). You're wondering why success and warnings are not working which is expected because it is excluded in shadcn by default but you want it and hook-misc is indeed the way to go. 🚀