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
```bash
npm install tailwindcss-social
```
### Yarn
```bash
yarn add tailwindcss-social
```
### pnpm
```bash
pnpm add tailwindcss-social
```
### CDN
Use via [jsDelivr](https://www.jsdelivr.com/package/npm/tailwindcss-social) โ no installation required:
```html
```
## ๐ Usage
### Standalone CSS
Import all providers or only the ones you need:
```js
// 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
```js
import tailwindcssSocial from 'tailwindcss-social';
export default {
plugins: [tailwindcssSocial()],
};
```
Limit providers for a smaller footprint:
```js
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
```html
```
### Icon-Only Buttons
```html
```
## ๐ญ 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:
```css
--tw-social-color
--tw-social-color-light
--tw-social-color-dark
--tw-social-on-color
```
Button runtime variables:
```css
--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](https://aldi.github.io/tailwindcss-social)
## ๐ค Contributing
Contributions are welcome! Please read our [Contributing Guide](https://github.com/aldi/tailwindcss-social/blob/main/CONTRIBUTING.md) 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](LICENSE).