Customize background image on theme for tailwind v4 #13756
-
Hi team I'm using tailwind 4 on a new project, and before migrating to it I was using version 3. On backgroundImage: {
'participant-overlay': 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.64))',
}, Is it possible to accomplish the same by defining this inside the Based on this section of the docs:
I left the I'm using |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 7 replies
-
You'd define @import "tailwindcss";
@theme {
--background-image-participant-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.64));
} |
Beta Was this translation helpful? Give feedback.
-
Hey. How can we add a background-size into the theme. I have of this way but it does not work!
In my component
It does not work here However the background image do work. I am confused |
Beta Was this translation helpful? Give feedback.
-
Hi everybody In tailwind we can use transitions to make changes from one color to another, this feature can also be used in gradients and radial gradient, however it only works if we use a tailwind color or specific color in HEX accompeined by I try to use the transition property to use it with custom gradients like: @import "tailwindcss";
@theme {
--background-image-gr1: radial-gradient(
64.21% 890.5% at 92.07% 100%,
oklch(0.5447 0.1215 246.1) 0.13%,
oklch(0.3064 0.0611 244.97) 100%
);
--background-image-g2: radial-gradient(
64.21% 890.5% at 92.07% 100%,
oklch(0.769 0.188 70.08) 0.13%,
oklch(0.627 0.265 303.9) 100%
);
} <div className="w-6 h-6 bg-gr1 hover:bg-gr2"/> and it doesn't work. Only tailwind classes work for me and make the gradiants with those classes. <div className="w-[300px] h-[300px] transition duration-1000 bg-radial-[64.21%_890.5%_at_92.07%_100%] from-[#2575b2] to-[#10324c] hover:from-[#fd9a00] hover:to-[#ad46ff]" /> Does anyone know how to use transitions with custom gradients? |
Beta Was this translation helpful? Give feedback.
You'd define
background-image
values in@theme
in the format--background-image-<key>: <value>
like:See this Tailwind Play of this working.