Apply "not" selector and "focus" that depends on another component

[valentin-harrang]

Hi,

I need an equivalent of this:

  &:not([value='']) {
    outline-none
  }
 ${Input}:focus ~ && {
    text-xs
  }

Is there an equivalent with this library?

[alexjidras]

@valentin-harrang If you use latest Tailwind version you can write custom modifiers (selectors) (i.e. &:not([value=''])) with arbitrary variants:

[&:not([value=''])]:outline-none

docs here: https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

For the next lines, referencing parent elements can be achieved with 'group' modifier and siblings with 'peer' modifier. For your use case: Mark the sibling element with:

peer

and the target element(s) with:

peer-focus:text-xs

Docs here: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

Suggest you to read the entire article.