DEV Community

Adrián UB for Ub Labs

Posted on • Edited on

How to add brand colors on TailwindCSS

GitHub logo ublabs / tailwindcss-brand-colors

Tailwind plugin for adding brands colors.

TailwindCSS Brand Colors

Tailwind plugin for adding brands colors.


Install

npm install @ublabs/tailwindcss-brand-colors
Enter fullscreen mode Exit fullscreen mode

or

yarn add @ublabs/tailwindcss-brand-colors
Enter fullscreen mode Exit fullscreen mode

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    //  for all list
    require('@ublabs/tailwindcss-brand-colors'),
    // select the brands
    require('@ublabs/tailwindcss-brand-colors')(['angular', 'tailwindcss']),
    // ...
  ],
};
Enter fullscreen mode Exit fullscreen mode

See the list of all brand colors available here

How to add a new brand color?

  • Fork/Clone Repository

    git clone https://github.com/YOUR-USERNAME/tailwindcss-brand-colors
    Enter fullscreen mode Exit fullscreen mode
  • Install Dependencies

    yarn install
    Enter fullscreen mode Exit fullscreen mode
  • Select Color

    Ex: #111827

  • Set Brand Color

    yarn nx workspace-schematic add-brand --name=<brand-name> --hex=#111827
    Enter fullscreen mode Exit fullscreen mode

Credits

Inspired by Simple Icons.

License

The MIT License (MIT). Please see License File for more information.

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay