How does tailwind determine a class utility to apply if there are competing classes within a component?
4 months ago Asked
0 Answers
2 Views
I am running into an issue where I have a component that already has padding defined. However, when I pass in an additional padding utility to the component via the `className` prop, my component still renders with the original padding.
Here is my component definition:
```
function MyComponent({classNames}) {
return <div className={`p-4 ${classNames}`}>{children}</div>
```
Here is where I render it:
```
function Home() {
return <MyComponent classNames="p-12">Hello World</MyComponent>
```
I expect the div to have `p-12` applied but it is still applying the `p-4`.