CSS code for the cbackground color

Elements
1

Hi

I am creating a custom button element, but I can’t seem to get the background color to match the brand. This is what I have.

background-color: rgb(var(–color-brand-500));
color: rgb(var(–color-surface-50));

The text is black, but nothing shows in the background of the button.

Thanks for the help.

Blessings,
–Mark

2

Have you added this as custom CSS or in the Advanced->Classes box? or somewhere else?

If it’s in the Classes box, you need to add use the following syntax:

bg-[rgb(var(--color-brand-500))]
text-[rgb(var(--color-surface-50))]
3

Hi,

Thanks for getting back to me.

I don’t have anything in that panel. In the template for the component I have:

.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: tan; color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 999999 !important; opacity: 0; transform: translateY(40px); pointer-events: none !important; transition: opacity 0.4s ease, transform 0.4s ease; } Rather than hard coded background and color (which work), I would rather have the theme brand var. Thanks. Blessings, --Mark
4

when we move to tailwind 4 you’ll have access to the colours via CSS custom properties (aka. CSS variables), meaning you’ll have access to those in your custom CSS.

Until then you’ll need to either hard code the colour in your css, or ideally just use the class names in your template:

<button class="back-to-top bg-brand-500 text-surface-50">Click me</Button>
5

I saw birds and heard some whispers… can we assume this is coming soon?

6

I can neither confirm nor deny the rumours that Tailwind 4 is coming to Elements soon :face_with_hand_over_mouth:

7

Thanks so much for getting back to me.

I am new to this CSS stuff, an dappreciate the help!

Blessings,
–Mark