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

Support using variables as arbitrary values without var() #9880

Merged
merged 4 commits into from
Nov 22, 2022

Conversation

adamwathan
Copy link
Member

This PR makes it possible to use CSS variables as arbitrary values without having to wrap them in var(...) for terser code. Since any arbitrary value starting with -- is unambiguously a CSS variable, we can know with certainty that the user isn't trying to do anything else so I can't find any reason that this isn't safe to do.

<!-- Before -->
<div class="w-[var(--width-var)] bg-[var(--color-var)] text-[length:var(--size-var)]">

<!-- After -->
<div class="w-[--width-var] bg-[--color-var] text-[length:--size-var]">

As you can see in the example above, this works with type-hints as well for when you need to tell Tailwind which utility you are trying to invoke explicitly.

Need to prepare documentation before merging.

@adamwathan
Copy link
Member Author

Documentation PR here: tailwindlabs/tailwindcss.com#1437

@adamwathan adamwathan merged commit b5f5adf into master Nov 22, 2022
@adamwathan adamwathan deleted the arbitrary-variable-shorthand branch November 22, 2022 15:24
@xfq
Copy link

xfq commented Nov 23, 2022

I might be missing something, but it looks like "any arbitrary value starting with -- is unambiguously a CSS variable" is not entirely true? For example, it can be a color profile.

@tomblanchard
Copy link

I might be missing something, but it looks like "any arbitrary value starting with -- is unambiguously a CSS variable" is not entirely true? For example, it can be a color profile.

More reading about this here as there's more CSS features which use --:

https://developer.mozilla.org/en-US/docs/Web/CSS/dashed-ident

@karimhossenbux
Copy link

Sick! How to apply bg-opacity along with those --var? I can't them to work with bg-opacity-* or bg-[--varname]/*

@hugentobler
Copy link

Dashed ident is also used for scroll-timeline-name
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name

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.

5 participants