svelte-fliptext

Default (hover)

Directions

Text color on hover

Plain Tailwind on the component itself — class="hover:text-pink-400 transition-colors". Color inherits down to the letters automatically.

Background color on hover

class="hover:bg-amber-400 hover:text-zinc-900 transition-colors rounded-lg px-3 py-1"

Active state (manual trigger + color combined)

trigger="manual" sets data-state on the root, so data-[state=active]:bg-indigo-500 targets it directly — no extra state needed for styling.

Per-letter colors (letterClasses as a function)

letterClasses={(letter, i) => rainbow[i % rainbow.length]}

White letters, colored pseudo-element

letterClasses="text-white after:text-pink-500" — the letter itself stays white, only its flipped-in duplicate (the ::after) gets a color, so the color only appears once the flip has happened.

White letters, rainbow pseudo-element per letter

Same idea, per letter — `text-white ${rainbowAfter[i % rainbowAfter.length]}`. This only works because rainbowAfter holds full literal class names ('after:text-red-400', not just 'red-400') — Tailwind needs the complete class string to appear in the source; assembling it at runtime from just the color name wouldn't generate any CSS.

Other elements (as)

No animation (animated={false})

Timing variants (flipTransition)