search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Tailwind css not working on Button components #219

Closed ravikeshyadav4 closed 2 months ago

ravikeshyadav4 commented 5 months ago

Tailwind css not working on Button components like when I'm adding padding, margin or background color it's not applying on Reshaped Button component.

<Button className="bg-cyan-700 p-4 m-2" >Submit</Button>

Screenshot 2024-02-07 at 10 30 06 AM

Padding, margin and background color class didn't got applied in button.

blvdmitry commented 4 months ago

Hey, this is probably happening for you because Reshaped CSS has more specificity than Tailwind classnames, for example this is the primary button selector that applies the background color:

image

Since Reshaped is not a completely headless library, applying this kind of style overrides might also be not completely safe in case component implementation gets updated in the future. If you want a one-off custom button you need to implement, you might want to look into the Actionable utility: https://reshaped.so/docs/utilities/actionable

In case you want to customize the Button component and you have a different color palette, compared to the Reshaped default one, you can look into the theming capabilities of Reshaped (which will also make sure that overrides won't break in the future): https://reshaped.so/docs/tokens/theming/creating-themes

For smaller padding, you might also check small button size and m-2 should work as expected

blvdmitry commented 2 months ago

Closing this to keep the backlog clean, feel free to reopen it if it's still causing issues