tailwindcss

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

Go to file

Fix opacity modifier using CSS variables (#14916 )

When using an opacity modifier such as `bg-black/[var(--opacity)]`, then
this was translated to:
```css
.bg-black\/\[var\(--opacity\)\] {
  background-color: color-mix( in oklch, var(--color-black, #000) calc(var(--opacity) * 100%), transp
}
```

The issue is that this part: `calc(var(--opacity) * 100%)` is invalid
_if_ the `var(--opacity)` already contains a percentage value. See:
https://play.tailwindcss.com/xz0t

This is because this eventually resolves to `calc(20% * 100%)` and `20%
100%` is invalid in CSS.

In Catalyst we use variables like that _with_ the `%` included, which
means that v4 doesn't work as expected when using this.

A variable with a `%` included is probably the better value to support
compared to the the unit less one. This also allows you to define your
variables using `@property` as a proper `<percentage>` type.

Unfortunately the `var(--opacity)` is a value that can change at
runtime, so we don't know the type at compile time.

In the future we might be able to use `first-valid(…)` (see:
https://drafts.csswg.org/css-values-5/#f and generate both versions at
the same time.

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

2024-11-08 15:17:03 +00:00

.github

Add CODEOWNERS file (#14701 )

2024-10-17 09:05:44 -04:00

crates

Fix crash when using @source containing .. (#14831 )

2024-10-30 16:24:48 -04:00

integrations

Fix glob pattern hoisting on Windows (#14904 )

2024-11-07 15:31:06 -05:00

packages

Fix opacity modifier using CSS variables (#14916 )