Customize background image on theme for tailwind v4

[Nilomiranda]

Hi team

I'm using tailwind 4 on a new project, and before migrating to it I was using version 3.

On tailwind.config.js I had this:

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 @theme at rule in the main css file?

Based on this section of the docs:

Support for JavaScript configuration files — reintroducing compatibility with the classic tailwind.config.js file to make migrating to v4 easy.

I left the tailwind.config.js file as well, at least to be able to configure this custom background image but it's not working.

I'm using tailwindcss": "4.0.0-alpha.15 btw.

[wongjn]

You'd define background-image values in @theme in the format --background-image-<key>: <value> like:

@import "tailwindcss";

@theme {
  --background-image-participant-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.64));
}

See this Tailwind Play of this working.

[Nilomiranda]

Thank you so much @wongjn, that worked!

Another question, similar to this one, how would we do it for a custom box shadow, like this?

 boxShadow: {
  'purple-400-border-1': '0 0 0 4px #9b8afb',
},

[Nilomiranda]

Oh, I got it working by doing:

--shadow-purple-400-border-1: 0 0 0 4px #9b8afb;

[hugoed31]

Hi, do you know how can i add a background-size. For exameple a background-size: 50%

[wongjn]

An arbitrary value class like:

<div class="bg-[size:50%]">

Or @utility like:

@utility foo {
  background-size: 50%;
}

<div class="foo">

[hugoed31]

Hey. How can we add a background-size into the theme. I have of this way but it does not work!

@import "tailwindcss";
@plugin "@tailwindcss/forms";

@theme {
    --background-image-home: url('/bg.svg');
    --background-size-home-xl: 50%;
}

In my component
import Header from '../components/Header';
import SearchForm from './SearchForm';

export default function HomeView() {
  return (
    <>
        <Header />

        <main className='bg-gray-100 py-10 min-h-screen bg-no-repeat bg-right-top lg:bg-home lg:bg-home-xl'>
          <div className='max-w-5xl mx-auto mt-10'>
            <div className='lg:w-1/2 px-10 lg:p-0 space-y-6'>
              <h1 className='text-6xl font-black'>
                All your <span className='text-cyan-400'>Social networks</span> in one link
              </h1>

              <p className='text-slate-800 text-xl'>
              Join more than 200 thousand developers sharing their social networks, 
              share your Instagram, Facebook, TikTok, Youtube, Github profile and more
              </p>

              <SearchForm />
            </div>
          </div>
        </main>
    </>
  )
}

It does not work here

However the background image do work. I am confused

[wongjn]

As per my previous comment (#13756 (reply in thread)), you can use an arbitrary value class like:

-<main className='… lg:bg-home-xl'>
+<main className='… lg:bg-[size:50%]'>

Or @utility like:

@utility bg-home-xl {
  background-size: 50%;
}

[J4ngel]

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 from-, to- and bg-linear, gradient or radial combining with hove:from- and hover:to-.

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?

[wongjn]

The from-* to-* transitions work because we change the colors in the gradient, not the gradient as a whole. With your custom gradients we are switching between separate background image gradients, hence no transition.

To work around this limitation in CSS, you could:

• Adjust the utilities so you are only changing the colors inside: https://play.tailwindcss.com/WPRMa1OYyO?file=css
• Have two elements on top of each other and cross-fade between them: https://play.tailwindcss.com/OrFF21Npj1

[J4ngel]

Thanks @wongjn I will keep that in mind.