How does tailwind determine a class utility to apply if there are competing classes within a component?

clock icon

4 months ago Asked

message

0 Answers

eye

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`.

0 Answer

Write your answer here

Top Questions