Create custom style prop or more prop to customize style

[emewjin]

Is your feature request related to a problem? Please describe.
I add w-full class on Button component to use it by full width, but internal class w-fit ignore it.

 <Button type='button' className='w-full bg-primary-500' onClick={handleOpenAddView}>
   글 작성하기
 </Button>

Describe the solution you'd like
maybe 2 option (just suggestion). Also, I think other components will need this option too.

1. add width prop on Button component. then user can customize button component's width

// for full width button
 <Button width='full'>
   sdfsdf
 </Button>

// for CTA button 🟩🟩🟩  🟦
<Button width='0.75'>
  🟩🟩🟩  
</Button>
<Button width='0.25'> 
  🟦
<Button>

2. add custom style prop to customize free without priority issue

 <Button custom='w-full'>
   custom prop should have high priority then internal class
 </Button>

Additional context
discord thread

[tulup-conner]

I think there's too many possibilities to add options as unique props, but we definitely need an "escape hatch" to override className. As you suggested, custom.

After you brought that up on Discord, I found this: https://github.com/richardgill/tailwind-override which I think we can use to add that escape hatch. That would make it so className can be provided to each component, and any classes will be applied without needing !important.

[emewjin]

@tulup-conner how about this? https://github.com/ben-rogerson/twin.macro

tailwind-override doesn't seem to be updated anymore

[tulup-conner]

@tulup-conner how about this? https://github.com/ben-rogerson/twin.macro

tailwind-override doesn't seem to be updated anymore

Yeah, tailwind-override isn't the best option for that reason and because it seems to have some outstanding unfixed bugs. They also chose to use regex to parse class names which inflated the bundle size.

Twin brings in a lot of dependencies and unrelated functionality. The dependencies thing is something we really want to avoid.

This isn't really my area of expertise, so I'm doing the same thing you are, looking around for libraries that have done it right already. The actual maintainers of this project are actively trying to solve this as well so I'm sure we'll get there.

[tulup-conner]

Following up, we are starting to complete theme support for components now; see #151, #153, #154, #155.

Note: The API is unstable (almost certain to change in some details before "done")

Your use case will be solved here in general, and I will make sure you can change this class in particular 💯

[tulup-conner]

See #160, it's in draft right now.

It just occurred to me that there are probably situations where you might want to add a className in a subset of your buttons, but not all of them. Brainstorming..

[emewjin]

See #160, it's in draft right now.

It just occurred to me that there are probably situations where you might want to add a className in a subset of your buttons, but not all of them. Brainstorming..

So cool !!
If I want to use Button w-full only in specific component, Is this what I should be doing?

const theme = {
  button: {
    base: 'w-full',
  },
};

or should like this?

const theme = {
  button: {
    base:  'group flex h-min w-full items-center justify-center p-0.5 text-center font-medium focus:z-10',
  },
};

[rluders]

@emewjin the second option. 'Cause you will always complete overwrite the style that you are customizing on your own theme.

[tulup-conner]

We should document that behavior for sure ^