Signals are Now Coming to Tailwind CSS?

A declarative alternative to styling based on an ancestor’s state

Brandon McConnell on Twitter

Tailwind Signals is a new experimental feature in Tailwind CSS that enables custom state consumption by any descendant in the DOM for cleaner coding and efficient styling. Signals build on the concept of pseudo-classes and allow for bidirectional communication between parent and child components, enabling child components to react to state changes in their parents and vice versa.

The feature is currently not supported in all browsers, specifically Safari and Firefox.

In the following example, we will see how Signals can be used to conditionally style elements based on input states without JavaScript, relying on the example provided on their GitHub page.

With Signals:

<input type="checkbox" class="peer" /> 👈🏼 check/uncheck here
<div class="peer-checked:signal hover:signal">
  <div class="signal:bg-green-800 bg-red-800 p-1 text-white">
    or hover here
  </div>
</div>

Without Signals:

<input type="checkbox" class="peer" /> 👈🏼 check/uncheck here
<div class="hover:[&>div]:bg-green-800 peer-checked:[&>div]:bg-green-800">
  <div class="bg-red-800 p-1 text-white">or hover here</div>
</div>