Getting Started

Use as a Tailwind plugin or standalone CSS

Install once, then choose your preferred integration mode:

1

Install with your package manager (npm default):

npm install tailwindcss-social
pnpm add tailwindcss-social
yarn add tailwindcss-social
bun add tailwindcss-social

2

Use as a Tailwind plugin:

@import "tailwindcss";
@plugin "tailwindcss-social";

Limit output to selected providers:

@plugin "tailwindcss-social" {
  providers: github, linkedin, youtube;
}

JavaScript configuration is also supported:

import tailwindcssSocial from 'tailwindcss-social';

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

3

Use as standalone CSS with npm imports:

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

// Or import only specific providers:
import 'tailwindcss-social/css/single/github/github.min.css';
import 'tailwindcss-social/css/single/linkedin/linkedin.min.css';
Font Awesome icons

To display icons, include Font Awesome 7:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.0/css/all.min.css" integrity="sha384-sTlsophtwz/I4myskS3OIJf5VvEojkXKZyBTWZm0YD/K1pN7C5wpBPLyrsbr1SU2" crossorigin="anonymous">

Starter Template

Copy this template to start right away:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons and Colors for TailwindCSS!</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Your preferred icon library here -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.0/css/all.min.css" integrity="sha384-sTlsophtwz/I4myskS3OIJf5VvEojkXKZyBTWZm0YD/K1pN7C5wpBPLyrsbr1SU2" crossorigin="anonymous">
<!-- Import all social provider styles from TailwindCSS-Social -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss-social@1/css/all.min.css">
</head>

Want a smaller bundle?

Import only the providers you need.

Explore Modularity