Dekorative Hintergründe ohne Layout-Chaos

Problem: Du willst einen Kreis hinter Text — aber padding und background zerstören das Spacing.

<!-- Kaputt: Buchstaben werden auseinandergerissen -->
<span class="bg-error/20 rounded-full px-2">ai</span>

Lösung: Absolute Positionierung mit negativem z-index:

<span class="relative">
  <span class="absolute -inset-x-2 -inset-y-0.5 
               bg-error/20 rounded-full -z-10"></span>
  ai
</span>

Der Hintergrund ist jetzt aus dem Textfluss genommen. -inset-x-2 erweitert ihn über die Textbreite hinaus. -z-10 schiebt ihn hinter den Text. Clean.