tailwindcss

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

History

Convert opacity keys to percentage values (#15067 )

This PR improves compatibility for named `opacity` theme values. One of
the changes in v4 is that we use the CSS `color-mix()` function to apply
opacity to colors. This, however, is limited to percentage values only:

```css
color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
/*                                              ^^^             */
/*                          This needs to be a percentage value */
```

In v3, however, it was common to specify custom opacity values as
decimal numbers. That's also what we did in our default config:


6069a81187/stubs/config.full.js (L703-L725)

This PR improves interop with these values by:

1. Converting decimal numbers in the range of `[0, 1]` to their
percentage value equivalent when using the interop layer.
2. Adjusts the codemod that migrates `opacity` theme keys to Tailwind v4
theme variables to include the same conversion.
3. Furthermore, due to the added support of named opacity modifers, we
can also drop theme keys that would now be the default. For example the
following config would not be necessary in v4 as the opacity modifier
would accept the value `50` by default:
    ```js
    module.exports = {
      theme: {
        opacity: {
          50: 0.5
        }
      }
    }
    ```

## Test Plan

Added a new integration test for the codemod and a unit test for the
interop layer. I also re-ran the codemod on the Commit template and it's
now working as expected (left is v3, right is v4):

<img width="2560" alt="Screenshot 2024-11-21 at 17 25 32"
src="https://github.com/user-attachments/assets/f0c87243-ca80-4c39-ae5e-c1ab48fbe614">

2024-11-21 19:06:58 +01:00

src

Convert opacity keys to percentage values (#15067 )

2024-11-21 19:06:58 +01:00

package.json

v4.0.0-alpha.36 (#15062 )

2024-11-21 14:20:56 +01:00

README.md

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

tsconfig.json

Internal refactor, introduce AtRule (#14802 )