Migration to v4 css based config

[matagaralph]

I was having fun learning TailwindCSS v4 by trying to translate our company's current TailwindCSS config to a v4 CSS-based config. My first question is, how do we separate colors in Tailwind CSS v4? Using a JavaScript-based config, I could specify colors as backgroundColors, borderColors, and stroke separately. What's the equivalent of this in v4? Could you provide an example?

Also, how can I define my colors for both dark and light modes in the same config file using CSS variables? I was exploring the default theme on GitHub. Are we saying these are the only things customisable by now?

I added a css variable --border-secondary: #d9d9e0; thinking if i say border-secondary this will apply the border color from the config file but instead it's looking for variable --color-secondary: #60646c; which in my case it's intend to be for secondary text. Accessing the variable like this works border border-[var(--border-secondary)] but it's just painful sometimes than just adding class border-secondary.

[wongjn]

I could specify colors as backgroundColors, borderColors, and stroke separately. What's the equivalent of this in v4? Could you provide an example?

The equivalents are:

v3	v4
backgroundColor.key	--background-color-<key>: <value>
borderColor.key	--border-color-<key>: <value>

See this Tailwind Play

---

Also, how can I define my colors for both dark and light modes in the same config file using CSS variables?

You could consider using the light-dark() function like:

@import "tailwindcss";

@theme {
  --color-foo: light-dark(white, black);
}

Or you could use the prefers-color-scheme media query like:

@import "tailwindcss";

@theme {
  --color-foo: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-foo: black;
  }
}

Although do be aware that the maintainers don't really recommend this approach:

For example, from Simon Vrachliotis:

When implementing dark mode interfaces, you likely don't always want to just "swap" or invert colors, and often need much more "fine control", to make contextual decisions on a lot of parts of the UI.

And from Adam Wathan:

Personally I think doing dark mode this way is seductive but not as practical as you expect. Tons of situations where you end up swapping the same color in light mode for two different colors in dark mode depending on how it’s used, and then you need to come up with different names for those two colors and it quickly becomes a very big project.

[matagaralph]

I could specify colors as backgroundColors, borderColors, and stroke separately. What's the equivalent of this in v4? Could you provide an example?

The equivalents are:

v3 v4
backgroundColor.key --background-color-<key>: <value>
borderColor.key --border-color-<key>: <value>
See this Tailwind Play

Also, how can I define my colors for both dark and light modes in the same config file using CSS variables?

You could consider using the light-dark() function like:

@import "tailwindcss";

@theme {
  --color-foo: light-dark(white, black);
}

Or you could use the prefers-color-scheme media query like:

@import "tailwindcss";

@theme {
  --color-foo: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-foo: black;
  }
}

Although do be aware that the maintainers don't really recommend this approach:

For example, from Simon Vrachliotis:

When implementing dark mode interfaces, you likely don't always want to just "swap" or invert colors, and often need much more "fine control", to make contextual decisions on a lot of parts of the UI.

And from Adam Wathan:

Personally I think doing dark mode this way is seductive but not as practical as you expect. Tons of situations where you end up swapping the same color in light mode for two different colors in dark mode depending on how it’s used, and then you need to come up with different names for those two colors and it quickly becomes a very big project.

Thank you very much champion let me try that.

[Dacaramo]

@wongjn I was trying to apply that same logic to migrate this to the global css file when using TailwindCSS 4, but I was unable to make this work.

This is the tailwind.config.js file that I'm trying to upgrade to v4:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'square-pattern': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg stroke-width='3.5' stroke='hsla(0, 0%25, 100%25, 1.00)' fill='none'%3E%3Crect width='400' height='400' x='0' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='800'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E")`,
        'square-pattern-light': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg stroke-width='3.5' stroke='hsla(215, 16%25, 47%25, 1.00)' fill='none'%3E%3Crect width='400' height='400' x='0' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='800'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E")`,
      },
    },
  },
}

Any ideas what the correct result looks like?

[wongjn]

@theme {
  --background-image-square-pattern: url(…);
  --background-image-square-pattern-light: url(…);
}