From 16f52b7bef745097f7076dde76715db378b54343 Mon Sep 17 00:00:00 2001 From: JJ Date: Wed, 19 Mar 2025 14:56:26 +0000 Subject: first commit --- content/snippets/tailwind-descendent-has.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 content/snippets/tailwind-descendent-has.md (limited to 'content/snippets/tailwind-descendent-has.md') diff --git a/content/snippets/tailwind-descendent-has.md b/content/snippets/tailwind-descendent-has.md new file mode 100644 index 0000000..5134ac9 --- /dev/null +++ b/content/snippets/tailwind-descendent-has.md @@ -0,0 +1,19 @@ +--- +title: Apply a tailwind class based on descendent state +description: Apply a tailwind class based on descendent state +tags: ["tailwind"] +--- + +You can apply css classes to parent elements if any of the parent's descendents meet a certain condition using the `has()` selector. + +Extending this to Tailwind is easy. A use case I came against recently was this: we have a header with a class that's passed dynamically using React state. The class is `scroll-locked`, used to indicate that the mobile menu has been toggled and that whole app should be scroll locked, i.e `overflow: hidden`. + +Instead of prop drilling and passing state from the `

` to the ``, which is where we want to scroll lock, we can use the `has()` selector on the `` to apply a class only when the `

`. + +The css for this is: + +```jsx + +``` + +`has-*` is a Tailwind modifier and what we pass in the [square brackets] is just css selector. `:` is used as a separator between different parts of a utility class name. -- cgit v1.2.3