tailwindcss

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

Go to file

Reduce specificity of * variant (#14056 )

This PR reduces the specificity of the * variant so that classes
directly on the child elements take precedence over the styles applied
by the parent.

Previously a utility like `*:flex` would generate this CSS:

```css
.\*\:flex > * {
  display: flex;
}
```

This selector has a specificity of `0,1,0`, which is the same as the
specificity for a bare utility class like `flex`, `block`, or `grid`.

Because variants always appear later in the CSS file than bare
utilities, this means that given this HTML, the `grid` class on the
child element would have no effect:

```html
<div class="*:flex">
  <div>...</div>
  <div class="grid">...</div>
  <div>...</div>
</div>
```

After this PR, the `*:flex` utility generates this CSS instead:

```css
:where(.\*\:flex > *) {
  display: flex;
}
```

This selector has a specificity of `0,0,0`, so even though it appears
later in the CSS, a bare utility with a specificity of `0,1,0` will
still take precedence.

This is something we wanted to do when we first introduced the `*`
variant in the v3 series, but couldn't because having such a low
specificity meant that styles in Preflight would take precedence over
utilities like `*:flex`, which is not would anyone would want.

We can make this change for v4 because now all of Preflight is wrapped
in a dedicated `@layer`, and rules from later layers always take
precedence over rules from earlier layers even if the rule in the later
layer has a lower specificity.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

2024-07-25 10:09:47 -04:00

.github

Add support for basic addVariant plugins with new @plugin directive (#13982 )

2024-07-11 09:47:26 -04:00

crates

Prep next release: 4.0.0-alpha.17 (#13951 )

2024-07-04 19:08:10 +02:00

packages

Reduce specificity of * variant (#14056 )

2024-07-25 10:09:47 -04:00

playgrounds

Add support for basic addVariant plugins with new @plugin directive (#13982 )