Odnoklassniki - TailwindCSS-Social Docs

Button Variants

Available variant modifiers:
.tw-social-variant-outline
.tw-social-variant-light
.tw-social-variant-dark
.tw-social-variant-inverted

<a class="tw-social-btn tw-social-provider-odnoklassniki">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Odnoklassniki</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-outline">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Outlined</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-light">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Light</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-dark">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Dark</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-inverted">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Inverted</span>
</a>

Icon Buttons

Icon-only buttons, no text label.
Required class:
.tw-social-icon-only

<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-icon-only" aria-label="Odnoklassniki">
  <i class="fa-brands fa-odnoklassniki fa-lg"></i>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-outline tw-social-icon-only" aria-label="Odnoklassniki outlined">
  <i class="fa-brands fa-odnoklassniki fa-lg"></i>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-light tw-social-icon-only" aria-label="Odnoklassniki light">
  <i class="fa-brands fa-odnoklassniki fa-lg"></i>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-dark tw-social-icon-only" aria-label="Odnoklassniki dark">
  <i class="fa-brands fa-odnoklassniki fa-lg"></i>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-variant-inverted tw-social-icon-only" aria-label="Odnoklassniki inverted">
  <i class="fa-brands fa-odnoklassniki fa-lg"></i>
</a>

Icon Placement

Use .tw-social-icon-left / .tw-social-icon-right for single-icon buttons.
Use data-icon="inline-start" / data-icon="inline-end" for per-icon control (e.g., icons on both sides).

Class modifiers (single-icon buttons)

Data attribute markers (per-icon control)

<!-- Class modifiers (single-icon buttons) -->
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-icon-left">
  <i class="fa-brands fa-odnoklassniki"></i>
  <span>Start</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-icon-right">
  <span>End</span>
  <i class="fa-brands fa-odnoklassniki"></i>
</a>

<!-- Data attribute markers (per-icon control) -->
<a class="tw-social-btn tw-social-provider-odnoklassniki">
  <i class="fa-brands fa-odnoklassniki" data-icon="inline-start"></i>
  <span>Marker Start</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki">
  <span>Marker End</span>
  <i class="fa-brands fa-odnoklassniki" data-icon="inline-end"></i>
</a>

Button Sizes

Available sizes:
.tw-social-size-sm
.tw-social-size-md
.tw-social-size-lg

<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-size-sm">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Small</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Normal</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-size-md">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Medium</span>
</a>
<a class="tw-social-btn tw-social-provider-odnoklassniki tw-social-size-lg">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Large</span>
</a>

Text Colors

Apply the provider color to any text

<p class="tw-social-text-odnoklassniki">Text with Odnoklassniki color</p>
<p class="tw-social-text-odnoklassniki-light">Text with Odnoklassniki light color</p>
<p class="tw-social-text-odnoklassniki-dark">Text with Odnoklassniki dark color</p>

Background Colors

Apply the provider color as a background

<div class="rounded-sm tw-social-bg-odnoklassniki text-white">
  .tw-social-bg-odnoklassniki
</div>
<div class="rounded-sm tw-social-bg-odnoklassniki-light">
  .tw-social-bg-odnoklassniki-light
</div>
<div class="rounded-sm tw-social-bg-odnoklassniki-dark text-white">
  .tw-social-bg-odnoklassniki-dark
</div>

Border, Ring, and SVG Utilities

Use these helpers for borders, focus rings, and SVG coloring.

<div class="tw-social-border-odnoklassniki border-2"></div>
<div class="tw-social-border-odnoklassniki-light border-2"></div>
<div class="tw-social-border-odnoklassniki-dark border-2"></div>

<button class="tw-social-ring-odnoklassniki ring-2">Ring utility</button>
<svg class="tw-social-fill-odnoklassniki" viewBox="0 0 24 24"></svg>
<svg class="tw-social-stroke-odnoklassniki" viewBox="0 0 24 24"></svg>

Need multiple providers in one file?

Build a custom CSS bundle with only the providers you need.

Explore Customization

Back to Providers