Styling: Component Styling via Tailwind

[JulianBu]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

We’ve observed that applying Tailwind styles through the className prop is frequently ineffective or unsupported by certain components. Sometimes we are forced to use a div as a wrapper for DB UX Components.
For example:

<div className="mx-[16px] flex h-[32px] items-center justify-center">
    <DBDivider variant="vertical" margin="none" width="full" />
</div>

Expected Behaviour

The expected behavior would be to ensure that we can use the className Prop and put Tailwind syntax into.
Like:

 <DBDivider 
    className="mx-[16px] flex h-[32px] items-center justify-center" 
    variant="vertical" 
    margin="none" 
    width="full" 
/>

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

No response

[nmerget]

@JulianBu I think it isn't a problem with tailwind. I tested it and the className will be added correctly.
The problem is the implementation of he divider, currently it is implemented as :before which might not work. We should look on this again.

---

Another question: Why do you use mx-[16px] flex h-[32px]. We provide extra tailwind tokens for using spacing-fixed etc. By using px or rem you don't use the Design System properly. Is this something you are aware of, or do you get those px values from Figma?

[JulianBu]

We’ve noticed that some components use the :before pseudo-element. Could you clarify the reason for that usage?
It appears that this might be related to the issue we’re experiencing, so it would be helpful if you could look into whether this can be improved or adjusted.

Regarding our own styling:
We’re using utility classes like mx-[16px] and similar because the spacing options provided by DB-UX are too restrictive for our needs. Since we're building a power-user–focused application, we often need to display dense information and apply very specific spacing manually.

[nmerget]

We use :before a lot because we can add elements to a HTML Tag without the need of an additonal <div> or <i>.
In the case of the divider it might be bad - we need to investigate it further. I struggled with the vertical variant as well, not working in all contexts. - I think it is just a bug we may fix ba using the <div> directly with some other display, we need to check this.

---

Do you use data-density=functional? We created the densities especially for those apps. E.g. the h-[32px] would be h-siz-md if you use functional as a density. This size would align to the DBButton, DBInput etc., so you get a consitent look and feel across the app.