[v4] clearing namespace for corePlugin doesn't work

[rj-elias]

What version of Tailwind CSS are you using?

v4.0.0-alpha.30

Reproduction URL

https://play.tailwindcss.com/bjEOmfVaL9

Describe your issue

@theme {
  --background-color-*: initial; /* DO NOT WORK: doesn't clear the background color namespace */
  --background-color-brand: blue; /* WORKS: extends the background color namespace with brand */
}

--background-color-brand: blue; works. It extends the background color namespace with 'brand'

--color-*: initial; works. It clear the whole color namespace --background-color-*: initial; doesn't clear the background color namespace

[rose21wiley]

There seems to be an inconsistency with how Tailwind CSS handles clearing namespaces for custom properties. Your observation that --background-color-: initial; doesn't clear the namespace while --color-: initial; does, suggests a possible bug or limitation in the current alpha version you're using.

Recommendations:

Verify your tailwind.config.js setup. Simplify your calc() usage to isolate the issue. Use custom CSS for complex transforms. Check browser support and update all dependencies Official Website

[cossssmin]

There isn't any --background-color-* var defined in @theme:

https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css

If you want to disable the color namespace you need:

@theme {
  --color-*: initial; /* or, just for blue: --color-blue-*: initial; */
  --color-brand: blue;
}

Then you can use bg-brand or text-brand and it would be blue.

Demo: https://play.tailwindcss.com/X9nhsDH09M

[rj-elias]

@cossssmin my question is more on applying colors only for bg or border rather than for all color. In v3 you can do that

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundColor: {
      newcolor: '#blue-value',
    }
  }
}

bg-newcolor will exists. But borer-newcolor or text-newcolor will not.

[cossssmin]

Oh, ok, then you don't even need to reset the namespace:

@import "tailwindcss";

@theme {
  --background-color-brand: blue;
}

<!-- blue background, browser default text color -->
<p class="bg-brand text-brand">Hello world</p>

Demo: https://play.tailwindcss.com/jPdur1FNp2

[rj-elias]

It is possible to extends but not to replace.

I want my bg to have only a set of values, my text to have a different set of values and my border to have Tailwind set of values.

In v3,

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    backgroundColor: {
      primary: 'white',
      secondary: 'gray',
    },
    textColor: {
      primary: 'black',
      secondary: 'orange',
  }
}

Only bg-primary and bg-secondary would be available and would be different from text-primary and text-secondary. border-* would use tailwind colors

In v4, we can't achieve the same.

@import "tailwindcss";

@theme {
  --background-color-*: initial;
  --background-color-primary: white;
  --background-color-secondary: gray;

  --text-color-*: initial;
  --text-color-primary: black;
  --text-color-secondary: orange;
}

This doesn't work. Right now, we can extends the colors for bg-* or for text-* (but that keeps all other tailwind colors available) or we can reset all colors (--color-*: initial;) but that resets also border-*.

[cossssmin]

Right, looks like some of those are read-only, was just looking to unset --text-decoration-* so that I can have it output the old text-decoration: syntax, but there isn't any set.

Maybe the team can chime in on whether there are plans to allow unsetting those namespaces - ideally you should be able to unset most (all?) utilities so that you don't output duplicates (like when adding custom utilities).

[adetoola]

I am willing to work on this if anyone can point me in the right direction @adamwathan

[adamwathan]

Yeah so this is a bit of a fundamental difference in how v3 and v4 work — in v3 core plugins only ever had one set of configured values and if those values were derived from somewhere else, that happened at the config level.

So the background color utilities would always read from theme.backgroundColor, but in the config, theme.backgroundColor would copy all of the values from theme.colors.

In v4, the background color utilities check multiple places, first --background-color-*, then --color-*, so any colors registered in either namespace are made available.

The only way to disable the values in --color-* for background color utilities would be to disable --color-* for everything, and explicitly configure the values for every utility that was otherwise reading from it:

@theme {
  --color-*: initial;

  --background-color-whatever: ...;

  --text-color-whatever: ...;

  --fill-whatever: ...;

  -stroke-whatever: ...;

  /* etc. */
}

Cumbersome for sure but in the interest of simplicity we're trying to encourage much lighter configs and trying to be more opinionated here, encouraging people to just use a global palette shared for everything.

So going to close this one as it's not something we plan to do differently than it's being done right now — sorry if it's a pain in the ass for a particular use-case, hard to design something without trade-offs.

[eakl]

Thanks @adamwathan for the precision. Do we have all the tailwind variables (—*) listed somewhere?

—color —background-color —…

[adamwathan]

Think this is all the color ones:

--accent-color: ...;
--caret-color: ...;
--divide-color: ...;
--accent-color: ...;
--placeholder-color: ...;
--border-color: ...;
--background-color: ...;
--fill: ...;
--stroke: ...;
--text-decoration-color: ...;
--ring-color: ...;
--ring-offset-color: ...;
--box-shadow-color: ...;
--text-color: ...;
--outline-color: ...;

Finding everything is just kind of a matter of digging around in here and seeing what namespaces are checked for different registered utilities:

https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utilities.ts