Tailwind CSS

Trker icons work seamlessly with Tailwind — use any text utility to color, size, and animate icons.

Colors

Icons inherit currentColor, so Tailwind's text color utilities apply directly:

<i class="trker trker-heart text-red-500"></i>
<i class="trker trker-star text-yellow-400"></i>
<i class="trker trker-check text-emerald-500"></i>

Sizing with Tailwind

You can use Trker's own size classes (.trker-2x, etc.) or Tailwind's text-* utilities for arbitrary sizes:

<!-- Trker size class -->
<i class="trker trker-home trker-2x"></i>

<!-- Tailwind arbitrary size -->
<i class="trker trker-home text-[3rem]"></i>

<!-- Tailwind responsive size -->
<i class="trker trker-home text-xl md:text-3xl lg:text-5xl"></i>

Dark Mode

Use Tailwind's dark: variant to switch icon colors in dark mode:

<i class="trker trker-moon text-slate-700 dark:text-slate-200"></i>

<i class="trker trker-sun text-yellow-500 dark:text-yellow-300"></i>

Hover & Focus States

Interactive icons respond to Tailwind's state variants:

<!-- Color change on hover -->
<button class="text-slate-400 hover:text-primary transition-colors">
  <i class="trker trker-bookmark"></i>
</button>

<!-- Scale on hover -->
<i class="trker trker-heart text-red-400 hover:scale-125 transition-transform cursor-pointer"></i>

Group Hover

Use Tailwind's group pattern to change an icon's color when a parent element is hovered:

<a href="#" class="group flex items-center gap-2 text-slate-600 hover:text-primary">
  <i class="trker trker-arrow-right group-hover:translate-x-1 transition-transform"></i>
  Learn more
</a>