Get npm package's CHANGELOG in one command

Tmk — Fri, 04 Nov 2022 03:53:29 +0000

I often run npm-check-updates to update my project's dependencies, but I also want to know what changed.

Traditionally, I need to find the package's GitHub repo, then open GitHub to query its release notes, which is tedious.

Thankfully, GitHub has a CLI version, so that we can do something in the terminal! With a custom extension, I can do the same thing in one command: gh cl react

https://github.com/tmkx/gh-cl

Introducing tailwind-bicolor: auto handle reverse dark color

Tmk — Wed, 26 Jan 2022 12:20:16 +0000

Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.

For example:

<html>
<body>
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

The background color of page will be white in light mode while being black in dark mode.

Let's show another example from the official:

<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
  The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
</p>

The text color will be slate-500 in light mode while being slate-400 in dark mode.

But you will find it's what a boring work soon:

white vs black
slate-500 vs slate-400
...

uh-huh? The color is opposite? interesting.

Let's take a look at tailwind's color palette:

Have you found how to find the reverse color? It's obviously:

50 to 900
100 to 800
200 to 700
... and vise versa

Why not create a variant to auto handle this for us?
This is why tailwind-bicolor, and it's super easy to integrate to your project.

// tailwind.config.js
const { bicolor } = require('tailwind-bicolor');

module.exports = {
  // ...
  plugins: [bicolor()],
};

<div class="bg-white dark:bg-black"></div>
<!-- Replace with below ↓↓↓ -->
<div class="bi:bg-white"></div>

and that's it! Go to Online Demo.

<div class="bi:bg-green-400"></div>

will generate:

.bi\:bg-green-400 {
  --tw-bg-opacity: 1;
  /* green-400 */
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.dark .bi\:bg-green-400 {
  /* green-500 */
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

It will auto handle reverse color by default, but it's also customizable even if you want to use green in light while using blue in dark.

DEV Community: Tmk

Get npm package's CHANGELOG in one command

Introducing tailwind-bicolor: auto handle reverse dark color

tmkx / tailwind-bicolor

Auto handle tailwind dark mode color