TailwindCSS-Social

Social Buttons and Brand Colors for Tailwind CSS

🎨 Live Demo · 📖 Documentation

✨ Features

• 🎨 25 Providers — All major social platforms included
• 🧩 Tailwind CSS Native — First-class Tailwind CSS plugin with namespaced tw-social-* classes
• 📦 Modular Imports — Import only what you need, keep your bundle minimal
• 🎭 4 Variants — Light, dark, outlined, and inverted button styles
• 🔧 Framework Agnostic — Works with React, Vue, Angular, Svelte, or plain HTML
• 🎯 Any Icon Library — Compatible with Font Awesome, Material Icons, Ionicons, and more
• ♿ Accessible — Built-in focus and disabled states
• 🎛️ Token-Driven — Full CSS variable contract for custom theming

📦 Installation

NPM

npm install tailwindcss-social

Yarn

yarn add tailwindcss-social

pnpm

pnpm add tailwindcss-social

CDN

Use via jsDelivr — no installation required:

<!-- All social providers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss-social@1/css/all.min.css" />

<!-- Or load specific providers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss-social@1/css/single/github/github.min.css" />

🚀 Usage

Standalone CSS

Import all providers or only the ones you need:

// All providers
import 'tailwindcss-social/css/all.min.css';

// Or import specific providers for smaller bundle size
import 'tailwindcss-social/css/single/github/github.min.css';
import 'tailwindcss-social/css/single/linkedin/linkedin.min.css';

Tailwind Plugin

import tailwindcssSocial from 'tailwindcss-social';

export default {
  plugins: [tailwindcssSocial()],
};

Limit providers for a smaller footprint:

import tailwindcssSocial from 'tailwindcss-social';

export default {
  plugins: [
    tailwindcssSocial({
      providers: ['github', 'linkedin', 'youtube'],
    }),
  ],
};

🎨 Supported Providers

apple	bitbucket	discord	dropbox
facebook	flickr	foursquare	github
gitlab	instagram	linkedin	microsoft
odnoklassniki	openid	pinterest	reddit
slack	soundcloud	tumblr	twitter
vimeo	vk	x	yahoo
youtube

💡 Usage Examples

Buttons with Text

<button class="tw-social-btn tw-social-provider-github">
  <i class="fa-brands fa-github"></i>
  <span>Continue with GitHub</span>
</button>

<button class="tw-social-btn tw-social-provider-github tw-social-variant-outline">
  <i class="fa-brands fa-github"></i>
  <span>Outlined</span>
</button>

Icon-Only Buttons

<button class="tw-social-btn tw-social-provider-github tw-social-icon-only" aria-label="GitHub">
  <i class="fa-brands fa-github"></i>
</button>

🎭 Button Styles & States

Styles

Class	Description
.tw-social-variant-light	Light variant
.tw-social-variant-dark	Dark variant
.tw-social-variant-outline	Outlined variant
.tw-social-variant-inverted	Inverted variant

Sizes

Class	Description
.tw-social-size-sm	Small
.tw-social-size-md	Medium (default)
.tw-social-size-lg	Large

Icon Modifiers

Class / Attribute	Description
.tw-social-icon-only	Icon-only button
.tw-social-icon-left	Icon on the left
.tw-social-icon-right	Icon on the right
data-icon="inline-start"	Logical inline start
data-icon="inline-end"	Logical inline end

🖌️ Color Utilities

For each provider (e.g. github):

Utility	Classes
Background	.tw-social-bg-github .tw-social-bg-github-light .tw-social-bg-github-dark
Text	.tw-social-text-github .tw-social-text-github-light .tw-social-text-github-dark
Border	.tw-social-border-github .tw-social-border-github-light .tw-social-border-github-dark
Ring	.tw-social-ring-github .tw-social-ring-github-light .tw-social-ring-github-dark
SVG Fill	.tw-social-fill-github .tw-social-fill-github-light .tw-social-fill-github-dark
SVG Stroke	.tw-social-stroke-github .tw-social-stroke-github-light .tw-social-stroke-github-dark

💡 Replace github with any supported provider name.

🎛️ CSS Variables

Provider classes expose the following variables:

--tw-social-color
--tw-social-color-light
--tw-social-color-dark
--tw-social-on-color

Button runtime variables:

--tw-social-btn-bg
--tw-social-btn-fg
--tw-social-btn-border
--tw-social-btn-ring

📖 Documentation

Full documentation with interactive examples is available at:

👉 aldi.github.io/tailwindcss-social

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b new-provider)
3. Commit your changes (git commit -m 'Add new provider')
4. Push to the branch (git push origin new-provider)
5. Open a Pull Request

📄 License

Released under the MIT License.