https://github.com/jaleelb/tailwindmate

A versatile color conversion tool for Tailwind CSS that seamlessly finds the equivalent Tailwind color class for a given color in various formats and converts tailwind color classes to other formats (HEX, RGB, HSL, RGBA, and HSLA)
https://github.com/jaleelb/tailwindmate

chroma-js color-converter color-tools colorpalette css-helper design-systems frontend nextjs rgb-hex-hsl tailwind-tool tailwindcss typescript

Last synced: about 13 hours ago
JSON representation

A versatile color conversion tool for Tailwind CSS that seamlessly finds the equivalent Tailwind color class for a given color in various formats and converts tailwind color classes to other formats (HEX, RGB, HSL, RGBA, and HSLA)

• Host: GitHub
• URL: https://github.com/jaleelb/tailwindmate
• Owner: JaleelB
• License: mit
• Created: 2023-05-04T01:40:58.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-08T03:14:23.000Z (over 1 year ago)
• Last Synced: 2024-11-11T22:35:22.039Z (2 months ago)
• Topics: chroma-js, color-converter, color-tools, colorpalette, css-helper, design-systems, frontend, nextjs, rgb-hex-hsl, tailwind-tool, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://tailwindmate.jaleelbennett.com/
• Size: 47.9 MB
• Stars: 33
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

  
TailwindMate






  An essential tool for Tailwind CSS developers, allowing easy color conversion to and from Tailwind classes.





  

    

  

  

    

  





  Introduction ·

  Features ·

  Usage ·

  Motivation ·

  Contributing






## Introduction

TailwindMate is a versatile web app specifically tailored for Tailwind CSS users. The application effortlessly finds the equivalent Tailwind class for a given color in various formats and converts Tailwind color classes to other standard formats including HEX, RGB, HSL, RGBA, and HSLA.

https://github.com/JaleelB/tailwindmate/assets/78449846/348294b8-3e4d-4c4c-bfa4-bdebacf0207a

## Features

Here are some of the features that Tailwindmate provides out-of-the-box:

- [Tailwind Color Conversion](#tailwind-class-conversion)

- [Standard CSS Color Code Conversion](#standard-css-color-code-conversion)

- [Versatile Color Format Support](#versatile-color-format-support)

### Tailwind Color Conversion

Input a color in any format (HEX, RGB, HSL, RGBA, or HSLA) and get the corresponding Tailwind CSS class.

![Tailwind Class Conversion Screenshot](https://raw.githubusercontent.com/JaleelB/tailwindmate/main/public/to-tailwind.png)

### Standard CSS Color Code Conversion

Input a Tailwind CSS class and get the corresponding color in any desired format.

![Color Code Conversion Screenshot](https://raw.githubusercontent.com/JaleelB/tailwindmate/main/public/from-tailwind.png)

### Versatile Color Format Support

Embraces a variety of color formats for maximum compatibility with your existing workflow.

![Versatile Color Format Screenshot](https://raw.githubusercontent.com/JaleelB/tailwindmate/main/public/formats.png)

## Usage

To use TailwindMate, simply input your desired color code or Tailwind CSS class in the appropriate field and the application will instantly provide you with the conversion. You can also copy the converted code to your clipboard with a single click.

## Motivation

Tailwind CSS, a utility-first CSS framework, has become a favorite among the developer community for its efficient and customizable utility classes. One area that often proves to be a challenge for developers, though, is handling color conversions within Tailwind CSS. Converting specific color codes to equivalent Tailwind CSS classes or the inverse can disrupt a developer's workflow, particularly when the color formats extend beyond the widely-used HEX.

Although there are conversion tools available, most of them are primarily focused on converting HEX color codes to Tailwind classes. This excludes a significant group of developers who work with other color formats such as RGB or HSL. Furthermore, finding a tool that converts Tailwind color classes back to different color formats proved to be a gap in the current tool offerings.

Recognizing these challenges, TailwindMate was conceived to fill this gap and create a more inclusive color conversion tool. MY goal is to provide a seamless solution that caters to all developers, regardless of their preferred color format. TailwindMate is not just about converting HEX to Tailwind classes; it's about embracing a varieyu of color formats and making the process of working with colors in Tailwind CSS as hassle-free as possible.

## Contributing

Here's how you can contribute:

- [Open an issue](https://github.com/JaleelB/tailwindmate/issues) if you believe you've encountered a bug.

- Make a [pull request](https://github.com/JaleelB/tailwindmate/pull) to add new features/make quality-of-life improvements/fix bugs.

## Author

- Jaleel Bennett ([@jal_eelll](https://twitter.com/jal_eelll))

## License

Licensed under the [MIT license](https://github.com/JaleelB/tailwindmate/blob/main/LICENSE.md).