As a developer, I am always looking for ways to streamline my workflow and make it more efficient. One area where I often find myself struggling is when it comes to working with custom colors in my projects. This can be especially challenging when using a content management system (CMS) like Prismic, which allows editors to select and customize the colors of various elements on the site.
Recently, I was working on a project using Nuxt.js, Prismic CMS, and Storybook, and I ran into some issues when trying to use the custom colors from the CMS in my styles. The problem was that I was using Tailwind CSS, which only includes CSS class names that are detected at build time. This means that if an editor selected a light blue color in the CMS and I received the hex code #33ccff, using bg-[#33ccff] in my class name wouldn't render the color.
At first, I wasn't sure how to solve this problem. I did some research and learned that I could include a safelist in my Tailwind config with a pattern for all the colors, so their class names would be included at build time.
safelist: [
{
pattern: /^bg-/,
},
{
pattern: /^text-/,
},
],However, this didn't solve my problem because the hex code #33ccff wasn't included in the list and I needed a way to convert it to the nearest equivalent Tailwind color name.
I searched for a solution and found the npm package tailwind-matcher, which claimed to do this conversion. However, upon further investigation, I discovered that it was only compatible with Tailwind CSS 2.0 and hadn't been updated in a while. This meant that it wouldn't work with the version of Tailwind CSS that I was using.
At this point, I had two options: either find another solution or create my own. I decided to go with the latter option and set out to create my own package that would convert hex codes to their nearest equivalent Tailwind CSS 3 color names.
The main idea behind the package is simple: it imports all the colors from Tailwind CSS 3, checks if the input is a valid hex color, uses the Nearest Neighbor algorithm by Daniel Tao to find the nearest Tailwind CSS 3 color, and then returns the name of that color.
I won't go into all the details of how I developed and tested the package, but suffice it to say that it took me several hours of work to get everything just right. Along the way, I encountered a number of challenges and had to troubleshoot and debug various issues. But in the end, I was able to create a package that I was proud of and that I knew would be useful to other developers.
After completing the package, I decided to publish it on npm so that others could benefit from it as well. It was my first time publishing an npm package, so it was a bit of a learning experience, but in the end, everything went smoothly and the package was live on npm within a few hours.
In conclusion, creating my own npm package was a challenging but rewarding experience. It taught me a lot about the process of developing and publishing an npm package and gave me a sense of pride and accomplishment. I'm excited to see how other developers will use the package and hope that it will make their workflow a little easier
P.S. You can find the npm package here