tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

Fix var(…) as the opacity value inside the theme(…) function (#14653 )

Inside the `theme(…)` function, we can use the `/` character for
applying an opacity. For example `theme(colors.red.500 / 50%)` will
apply a 50% opacity to the `colors.red.500` value.

However, if you used a variable instead of the hardcoded `50%` value,
then this was not parsed correctly. E.g.: `theme(colors.red.500 /
var(--opacity))`

_If_ we have this exact syntax (with the spaces), then it parses, but
some information is lost:

```html
<div class="bg-[theme(colors.red.500_/_var(--opacity))]"></div>
```

Results in:
```css
.bg-\[theme\(colors\.red\.500_\/_var\(--opacity\)\)\] {
  background-color: color-mix(in srgb, #ef4444 calc(var * 100%), transparent);
}
```
Notice that the `var(--opacity)` is just parsed as `var`, and the
`--opacity` is lost.

Additionally, if we drop the spaces, then it doesn't parse at all:

```html
<div class="bg-[theme(colors.red.500/var(--opacity))]"></div>
```

Results in:
```css
```

This means that we have to handle 2 issues to make this work:
1. We have to properly handle the `/` character as a proper separator.
2. If we have sub-functions, we have to make sure to print them in full
(instead of only the very first node (`var` in this case)).

2024-10-14 12:08:41 +00:00

.github

Try out namespace GitHub Actions workers (#14587 )

2024-10-08 13:48:32 +02:00

crates

Fix template migration issues (#14600 )

2024-10-08 18:06:43 +02:00

integrations

Convert to/from v3 theme keys in configs and plugins (#14642 )

2024-10-11 10:24:53 -04:00

packages

Fix var(…) as the opacity value inside the theme(…) function (#14653 )