The CSS framework Tailwind CSS and it's utility-first approach has completely changed the way I approach designing websites with CSS. Instead of creating custom CSS classes like “button” or “header” you use utility classes like “p-5” to add a padding to an element.
During my journey with Tailwind CSS, I came across a problem. Sometimes I wanted to “translate” a specific color from, say an existing design, to one from the default Tailwind color palette. There were some existing tools fulfilling that need, but none of them seemed particularly appealing to me. And so I started a new project and created the website Tailwindize.
What the site essentially does is the following: You input whatever color you like using the integrated color picker and get the name of the nearest Tailwind color as an output. In certain cases you may have to edit your Tailwind config (tailwind.config.js), but the site will also tell you about that.
On the technical side of things I went for a simple setup. The page is just a static site hosted by Nginx running inside a Docker container. I intentionally only used pure JavaScript with no framework, HTML and of course Tailwind CSS. I even replaced npm with Skypack.dev. Instead of learning yet another library or programming language, I built the site using the tools I already knew. This results-first approach resulted in messy code, but any other approach would have probably led to me never finishing this project.
The project is open source, so check it out if you want. I greatly appreciate any feedback!
