Using Tailwind colors in Little Eagle

It’s hard picking colors that work well together. If you’ve ever used Tailwind, then you’re probably seen their fantastic color palette:

Each shade has been methodically chosen to work well together — red-500 will look about the same brightness on screen as blue-500

(We like Tailwind so much we even use Tailwind and its built-in palette to create this site.)

Wouldn’t it be great if you could use these colors in more places? Well, we allow you to bring them to Little Eagle.

In Little Eagle templates, you can customise the colors of the background and text how you please by passing hex colors, for example #CC313D for a bright red.

In the latest @littleeagle/images-node package, you can now pass a transformColor configuration to the gitHubTemplateURL() function to transform your color design token to a hex value.

For example, red-500 would become #ef4444. And if you use text-red-500 or bg-red-500 on your website, it’ll be exactly the same color.

Here’s a code snippet to lookup using the colors from the Tailwind package:

// transform-color.ts
import colors from 'tailwindcss/lib/colors';

export function transformColor(input: string): string {
  const parts = input.split('-');

  const found = parts.reduce((lookup, part) => {
    if (lookup != null && part in lookup) {
      return lookup[part];
    } else {
      return null;
    }
  }, colors);

  if (typeof found === 'string') {
    return found;
  } else {
    return input;
  }
}

And then here’s how you’d plug this transformColor function in:

import { gitHubTemplateURL } from "@littleeagle/images-node";
import { transformColor } from "./transform-color.ts";

const imageURL = gitHubTemplateURL({
  username: "BurntCaramel",
  // Now you use Tailwind’s colors instead of typing hex values
  backgroundColor: "indigo-900",
  text: [
    { text: "First", size: 17, color: "red-300" },
    { text: "Second", size: 23, color: "orange-300" },
  ],
  authorName: 'Patrick Smith',
  website: 'icing.space',
}, {
  transformColor: transformColor
});

// Use `imageURL` e.g. as the value in a `og:image` meta tag or
// src of an `<img>`.

The forms on this website, such as the one for the GitHub Template, are configured to accept Tailwind 3’s colors. So you can type red-600 into any of the color form fields and it’ll just work.