Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow border-* to match both color and size namesaces at the same time #16513

Closed
wants to merge 1 commit into from

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Feb 13, 2025

Closes #16343

In v3, if you had a colors and borderWidth key that resolved to the same value, using the border-* utility would actually match create both rules: https://play.tailwindcss.com/Loe4Z1eKky?file=config

In v4, however, it currently only looks at the color and then ends. This PR changes it to be compatible with v3.

My main motivation for fixing this is that this is actually more like the @utility API works right now already where this would generate both rules: https://play.tailwindcss.com/bQNe7wXOJb?file=css

@utility border-* {
  color: --value(--color-*);
  border-width: --value(--border-width-*);
}

@philipp-spiess philipp-spiess requested a review from a team as a code owner February 13, 2025 17:19
@philipp-spiess philipp-spiess force-pushed the fix/border-that-matches-both-namespaces branch from 6438284 to 8a84982 Compare February 13, 2025 17:21
@philipp-spiess
Copy link
Member Author

I wonder if we should audit all other utilities as well? This should probably be consistent for other things that have more than one overload, e.g. bg``stroke, from etc...

@philipp-spiess philipp-spiess marked this pull request as draft February 13, 2025 17:22
@philipp-spiess
Copy link
Member Author

philipp-spiess commented Feb 21, 2025

I'm going to close this issue for now since we aren't sure wether we want to make this change yet. It's unfortunate for backward-compatibility but we also think that it's kind-of unexpected since you're expecting most of these utilities to only set one value and if you are overloading the namespaces to have "side effects" (e.g. by having a color named default and a width named default) it's going to cause confusing in the stylesheet. You can still do that with @utility if you want to in user space.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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