Finally TS support… and tests!

v1.2.0 introduces TS support at long last. This has been in the plans for a while, and with TailwindCSS officially adding TS support as of v3.3 (announcement), it felt like the right time to prioritize this.

v1.2.0 also adds tests to make future development of this package more reliable and error-proof.

Thanks for the help in getting these improvements over the finish line, @shreyas-jadhav! 💯

Related PRs:

• TS support: #4
• Tests: #5

Introducing lerpColor, for lerping individual colors

⚠️ IMPORTANT ⚠️

Because this plugin now supports multiple exports, you will need to use named exports if/when upgrading to this new version and beyond. For example:

Before: const lerpColors = require('tailwind-lerp-colors');
After: const { lerpColor, lerpColors } = require('tailwind-lerp-colors');

With version v1.1.6, you can now lerp individual colors (shades objects) for cases where you may want to lerp an individual color object elsewhere in your codebase.

For example, if you wanted to lerp this object:

const gray = {
  50: '#f6f7f8',
  300: '#9ea8b7',
  500: '#6b778c',
};

Before

Before this update, you would have had to do some hacky implementation to lerp outside of the Tailwind config to ref via JS, like this:

const gray = lerpColors({
  temp: { // <----- creating temporary key names 🤢
    50: '#f6f7f8',
    300: '#9ea8b7',
    500: '#6b778c',
  }
}).temp; // <----- just to reference it again here 🤮

After

Now, you can use lerpColor (not lerpColors) to circumvent this pesky behavior, like this:

const gray = lerpColor({
  50: '#f6f7f8',
  300: '#9ea8b7',
  500: '#6b778c',
});

Option object

This new method supports all the options from the usual options object for lerpColors which are pertinent to the lerping functionality. These are (including their default values):

{
  lerpEnds: true,
  interval: 25,
  mode: 'lrgb',
}

---

More info

• lerpColors has been refactored as well to build upon the lerpColor as its foundational mechanic for lerping colors.

• One key use case for this update is to lerp colors outside your Tailwind config so you can reference you lerp'd shades elsewhere in your codebase's JS, where you may not have access to Tailwind utilities.

• If you are working in a codebase where you want to lerp individual colors alongside the lerp'd base colors from taiwlind, you could do something like this:

  module.exports = {
    theme: {
      colors: {
        ...lerpColors(), // lerp default Tailwind colors
        gray: lerpColor({
          50: '#f6f7f8',
          300: '#9ea8b7',
          500: '#6b778c',
        }),
      },
    }
  }

  ☝🏼 this also allows you more granular control over the lerping options per colors, if you have some colors that are lerp'd on a different scale (e.g. 1-9 vs. 50-900), if you want to lerp colors using differing color modes (e.g. rgb vs. lab), or otherwise.

Minor improvement / bug fix v1.1.5

This commit fixes a reported issue causing the terminal to output warnings about legacy color names being used, even when the legacy colors are not being used.

The fix was to iterate over the keys instead of the entries of the default theme colors object.

Thanks for the report and suggestion, @dimfeld 💯

🛠 Bug fix & minor improvements: v1.1.4

There were some instances of includeEnds that were not renamed to lerpEnds along with those that v1.1.3 changed. This release fixes that and updates the default color blending mode to LRGB (lrgb) instead of RGB (rgb) which naturally works against the gray dead zone typical of RGB gradients.

Related release on NPM → https://www.npmjs.com/package/tailwind-lerp-colors/v/1.1.4

Major release: v1.1.3 🎉

⚠️ IMPORTANT

└ There was a bug in this release, so use v1.1.4 which resolves the bug from this release and includes several other improvements. For more information, see the v1.1.4 release notes.

---

With the release of v1.1.3, tailwind-lerp-colors shifts its approach from being a "plugin" to operating as a function that wraps the object of colors defined under theme.colors in your Tailwind config. The original goal was to have this feature working as a full-fledged Tailwind plugin, but after discussing with the Tailwind team via Tailwind CSS Issue #544, it became clear this functionality is not actually possible as a plugin, at least not in Tailwind's current approach.

Down the road, as Tailwind continues to grow and evolve, if this becomes a possibility, I may consider an option to install this function as a plugin, though I intend to retain support for the function method, as this works without relying on Tailwind to support its efforts. The plugin would just be a nice-to-have bonus if it ever becomes possible.

All notes on the latest version can now be found in this repo's latest README, which you can find here.

---

Most significant of all in this release is the shift from initializing tailwind-lerp-colors as a plugin to using it as a function that wraps around your theme.colors object—

Before

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // your colors
    }
  },
  plugins: [
    require('tailwind-lerp-colors'),
    // ...other plugins
  ],
}

After

// tailwind.config.js
const lerpColors = require('tailwind-lerp-colors');

module.exports = {
  theme: {
    colors: lerpColors({
      // your colors
    }, {
      // function options (all optional)
      includeBase: true,
      includeLegacy: false,
      lerpEnds: true,
      interval: 25,
      mode: 'rgb',
    })
  },
}