← All posts

Register Custom Brand Colors in Tailwind CSS with Winden

winden

A client says the Tailwind green you picked is close, but it isn't their brand color. If you paste their hex value into every class and stylesheet, the next color change means hunting down each copy. In this video we register the brand hex as a custom Tailwind CSS color with a full shade set. From then on, border-brand-500, bg-brand-500 and the other brand classes all come from one place in the config, and that config works the same way in Winden.

When the built-in palette isn't close enough

Tailwind's default palette covers a lot, but a client's brand color is usually an exact hex value. In the video we first proposed one of the built-in colors from the Emerald range on the Tailwind Customizing Colors docs page. The client turned it down because it wasn't their exact brand hex.

The fix is to stop looking for a close match and register the real color.

Generate a shade set from the brand hex

One hex value gives you one color. In a real design you also need lighter and darker versions for hovers, backgrounds and borders. A shade generator creates the full 50–900 scale from that one value.

  1. Open the design and copy the exact hex value of the brand color (in the video: #024547).
  2. Go to the Shades Generator for Tailwind CSS.
  3. Paste the hex and click Go!.
  4. Name the color brand, click Done, then copy the generated object.

Register the color in the Tailwind config

Once the color is in the config, you get utility classes for it the same way you do for Tailwind's built-in colors. Put the copied object under theme.colors:

module.exports = {
  theme: {
    colors: {
      'brand': {
        '50': '#f2f6f6',
        '100': '#e6eced',
        '200': '#c0d1d1',
        '300': '#9ab5b5',
        '400': '#4e7d7e',
        '500': '#024547',
        '600': '#023e40',
        '700': '#023435',
        '800': '#01292b',
        '900': '#012223',
      },
      'white': '#ffffff',
    },
    extend: {
      // ...
    },
  },
  plugins: [],
}

brand-500 is the exact value from the design. The other shades are the lighter and darker steps the generator created.

Adding colors directly under theme.colors replaces Tailwind's default palette. That is why we had to add white back later, when we needed white text. If you need a default color, list it next to brand.

Use the brand color as a left border accent

The design has a colored line on the left of each heading. Put that in one class and the accent stays the same on every heading that uses it.

The demo markup is a set of headings that use a has-border class:

<div class="w-full container">
  <h1 class="has-border">This is a title</h1>
</div>

<div class="w-full container">
  <h2 class="has-border">This is a title</h2>
</div>

In the CSS we apply an 8px left border in the brand color, plus some left padding:

.has-border{
  @apply border-l-8 border-brand-500 pl-4;
}

The border changes to the brand color right away in the preview.

Brand background with white text

The design also has a section where the background is the brand color and everything inside it is white. We made a bg-brand class for that and added it to the container: <div class="w-full container bg-brand">.

.bg-brand{
  @apply bg-brand-500 text-white [&_*]:border-white;
}
  • bg-brand-500 is the exact brand hex from the design.
  • text-white works because we added white back to theme.colors.
  • [&_*]:border-white targets the elements inside the section. Without it, the heading's brand-colored left border would disappear against the brand background.

The full CSS from the demo:

@tailwind base;
@tailwind components;
@tailwind utilities;

.container {
  @apply p-16;
}

h1 {
  @apply text-6xl;
}
h2 {
  @apply text-4xl;
}

.has-border{
  @apply border-l-8 border-brand-500 pl-4;
}

.bg-brand{
  @apply bg-brand-500 text-white [&_*]:border-white;
}

Same config in Winden

We built the demo in Tailwind Play, but the config itself is plain Tailwind. You can use the same color setup in Winden, and your brand classes will work the same way on your WordPress site. The Tailwind Customizing Colors documentation covers more options if you want to go further.

Who is this for

  • Site builders working with client brand guidelines who need the exact brand hex, not the nearest Tailwind color.
  • Winden users who want one named color in the config instead of hex values in many places.
  • Developers setting up a design system who need lighter and darker shades generated from one base color.

FAQ

How do I add a custom color to Tailwind CSS?

Add it under theme.colors in the Tailwind config with a name, such as brand, and a set of shades from 50 to 900. Tailwind then gives you classes like bg-brand-500, text-brand-500 and border-brand-500.

How do I get the 50–900 shades from one hex value?

Paste the hex into an online shades generator like the one in the video (javisperez.github.io/tailwindcolorshades), name the color and copy the generated object into your config.

Why did text-white stop working after I added my color?

When you put colors directly in theme.colors, they replace Tailwind's default palette, so white is gone as well. Add 'white': '#ffffff' next to your custom color, like we did in the video.

Does the same config work in Winden?

Yes. Whatever you set up in the Tailwind configuration can be reused inside Winden.

Get Winden → dplugins.com

Related posts