Customization

Tune provider output, tokens, and generated CSS

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

  1. Open src/providers.js
  2. Update a provider HSL color (or add/remove a provider)
  3. Run npm run build
  4. 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