Provide a way to override the rounded style of anchor & button elements

[16Integer]

As the title implies, I need a way to override the button/anchor default rounded styles as I am having an input field and button on the same row, next to each other. Simply just using !rounded-r-md (the rounded style im going for) does not work properly, as it is not resetting the other rounded styles. So I have to first used rounded-none, & then the !rounded-r-md to override that, which is not great. Plus, when resizing and adjusting these styles through breakpoints, for a split second it will show the rounded-none style, then the !rounded-r-md.

Here's what I'm using right now:

        w-full sm:rounded-none sm:!rounded-r-md active:scale-[100%] btn variant-filled-primary

[endigo9740]

Hey @passmgrgui, one of the primary features of Skeleton is our theme generator. This features a way to adjust things like button and input rounding right from the start. If you haven't already, you can check it out here:
https://www.skeleton.dev/docs/generator

You can see a deeper dive into themes here as well:
https://www.skeleton.dev/docs/themes

And obviously, if you're using one of our preset themes, they're going to have these settings "baked in". But these settings are handled via CSS Custom Properties (aka CSS variables), which means you can override these in your local project scope. We provide details on doing this here:
https://www.skeleton.dev/docs/themes#overwriting-properties

For buttons and inputs, this would be controlled via the property called: --theme-rounded-base

I also see you're defining your class order in kind of a reversed order, adjusting rounding settings first, then applying the Skeleton btn class. I might suggest flipping that as this can sometimes have an affect on class and style precedence.

Finally, Skeleton's utility classes such as .btn and .input are just CSS. Which again, means styles "cascade" and can be overwritten in the scope of your project. Try doing something like this in your global stylesheet app.postcss:

.btn {
    /* note: I've included ! but it may not be needed here */
    @apply sm:!rounded-r-md; 
}

This will apply this override globally for all instances that use the .btn class, and you can make as many modifications as you want. You're also welcome to create your own utility classes that be used in combination as well. It's the main concept Tailwind is all about!

Hope this helps!

[16Integer]

Hi, thanks a lot for the reply. However, I would only like to override it on that one button, not all buttons.

[endigo9740]

In that case what you're doing is the correct way to go about it. If for some reason you don't want to try to deal with the default .btn styles, you could always forego the class and create your own styles from scratch. That's the reason we use a class, so it's opt-in only when you need it.