tailwindcss

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

History

Add new in-* variant (#15025 )

This PR adds a new `in-*` variant that allows you to apply utilities
when you are in a certain selector.

While doing research for codemods, we notice that some people use
`group-[]:flex` (yep, the arbitrary value is empty…). The idea behind is
that people want to know if you are in a `.group` or not.

Similarly, some people use `group-[]/name:flex` to know when you are in
a `.group/name` class or not.

This new `in-*` variant allows you to do that without any hacks.

If you want to check whether you are inside of a `p` tag, then you can
write `in-[p]:flex`. If you want to check that you are inside of a
`.group`, you can write `in-[.group]`.

This variant is also a compound variant, which means that you can write
`in-data-visible:flex` which generates the following CSS:
```css
:where([data-visible]) .in-data-visible\:flex {
  display: flex;
}
```

This variant also compounds with `not-*`, for example:
`not-in-[.group]:flex`.

Additionally, this PR also includes a codemod to convert `group-[]:flex`
to `in-[.group]:flex`.

---

This was proposed before for v3 in #13912

---------

Co-authored-by: Eloy Espinaco <eloyesp@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

2024-11-18 15:28:16 +00:00

src

Add new in-* variant (#15025 )

2024-11-18 15:28:16 +00:00

package.json

Update tree-sitter-typescript 0.23.0 → 0.23.2 (minor) (#15026 )

2024-11-18 10:23:22 +01:00

README.md

Add initial codemod tooling (#14434 )

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

tsconfig.json

Internal refactor, introduce AtRule (#14802 )