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 tailwindcssSocial from 'tailwindcss-social';

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

Limit output to selected providers:

import tailwindcssSocial from 'tailwindcss-social';

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

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/css/all.min.css">

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/css/all.min.css">
<!-- 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

Developed with by aldi

The source code is licensed under MIT.

Available in and

View Changelog