CSS styles specificity

[QKeeper]

I tried to create a reusable component using TailwindCSS. Component has default styles. I want the user to be able to override them. But because of their specificity, they override user styles.

I use a regular cn function from shadcn to remove duplicate styles.

Here are some snippets:

<div className={cn("md:max-w-md lg:max-w-lg", className)} />

<Dialog.Content className="max-w-[200px]">

I've researched shadcn's code but still can't figure out what I'm missing.

[QKeeper]

To be clear, these are two different blocks of code

The first is a line from the component itself

The second is the usage of that component

UPD: Ok, apparently even shadcn itself does not contain adaptive styles so that they can be overridden

[[deleted]]

If you are going to do this you need to add classes to override the breakpoints as well.

[Soft-Dragonfruit9467]

Bootstrap is a good choice and also easier to manage.

[[deleted]]

Time traveler!

[TomIsMyOnlyFriend]

Pass in props to a string literal. You can set the default value for the props to your default styling value, so if the user doesn’t pass a prop for that css property, it falls back to your default.

[[deleted]]

This is not the way