1. You can write styles for properties that [email protected] doesn't support

<div class="[mask-type:luminance] [cx:17px]">
  <!-- ... -->
</div>

2. How to use css variables in tailwind

<div class="bg-[--my-color]">
  <!-- ... -->
</div>

3. How to use media and supports in tailwind inline

<div class="[@supports(cx:1)]:translate-x-0 [@media(hover:none)]:w-12">
  <!-- ... -->
</div>

4. Media Hover can be used to detect which devices don't have hover ( touch devices )

<div class="[@media(hover:none)]:w-12">
  <!-- ... -->
</div>

5. How to type custom events in Typescript