Customize - TailwindCSS-Social Docs

TailwindCSS-Social is generated from JavaScript source files (no SASS layer).

src/providers.js — provider names + HSL source colors
src/tokens.js + src/styles.js — derived tokens and class generation
scripts/build.js — outputs css/all.min.css and css/single/*

Customize in plugin mode

Use the plugin options to emit only the providers you need.

import tailwindcssSocial from 'tailwindcss-social';

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

Customize in standalone CSS mode

Import the full bundle or only provider files.

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

// or per-provider files:
import 'tailwindcss-social/css/single/github/github.min.css';
import 'tailwindcss-social/css/single/linkedin/linkedin.min.css';

Customize source colors and rebuild

Open src/providers.js
Update a provider HSL color (or add/remove a provider)
Run npm run build
Generated artifacts are updated in css/

// src/providers.js
export const providers = {
  github: {
    name: 'GitHub',
    color: 'hsl(210, 12.2%, 16.1%)',
  },
  linkedin: {
    name: 'LinkedIn',
    color: 'hsl(210, 90.2%, 40%)',
  },
};

You can also override button runtime variables in your app CSS:

.tw-social-provider-github {
  --tw-social-btn-border: color-mix(in srgb, var(--tw-social-color) 55%, white);
}

.tw-social-btn {
  border-radius: 9999px;
}

Not sure which providers to include?

Preview every provider and style variant before deciding your output.

Explore All Providers

Customization