Generated CSS for border-width is not consistent with v3 when importing a config with @config directive

[KarthikeyanRanasthala]

What version of Tailwind CSS are you using?

4.0.4

What build tool (or framework if it abstracts the build tool) are you using?

vite 6.1.0, @tailwindcss/vite 4.0.4, @tailwindcss/postcss 4.0.0

What version of Node.js are you using?

v22.11.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

Refer to this repo in the following branches,

with v3: tw-v3-with-preset
with v4 & vite plugin: tw-v4-with-preset-and-vite-plugin

Describe your issue

Inconsistent output between v3 & v4

The generated css is incorrect when importing a tailwind config using @config directive.

// preset.js
export default {
  theme: {
    colors: {
      default: "#0000ff",
    },
    borderWidth: {
      default: "1px",
    },
  },
};

// tailwind.config.js
import preset from './preset'

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  presets: [preset],
}

/* output in v3 */
.border-b-default {
    border-bottom-width: 1px
}

/* output in v4 */
.border-b-default {
    border-bottom-color: #00f
}

For the above example, a custom theme has the same key default defined for properties borderWidth and color. Then for a class border-b-default, it should've generated border-bottom-width: 1px (as it did in v3) but it generates border-bottom-color: #00f (in v4)

v4 still seems to respect that explicitly defined properties should have higher priority ie textColor > colors, fill > colors etc. So it looks like border is the only one having this issue as border- is used for multiple properties like border-width, border-style and border-color.

[philipp-spiess]

Hm it seems like v3 generated both rules if the namespace lookup matched, interesting: https://play.tailwindcss.com/Loe4Z1eKky?file=config

[philipp-spiess]

@KarthikeyanRanasthala Hey! We thought about this a bit and even though this is unfortunately for backwards-compatibility, we aren't too happy about changing this either.

We think that setting more than one property from utilities like this is unexpected to users since it's not how Tailwind works in the default configuration so we recommend against "overloading" these namespaces (e.g. by having a color named default and a width named default).

You can, however, still do that with custom @utility definitions if you want to in user space.

Happy to talk over this in more detail but I'm going to move this into a discussion for now.