edjw / find-nearest-tailwind-colour Goto Github PK

A webapp to find the nearest Tailwind CSS colour from a given hex colour code

Home Page: https://find-nearest-tailwind-colour.edjohnsonwilliams.co.uk

JavaScript 49.63% CSS 0.44% Svelte 44.20% HTML 4.74% TypeScript 0.99%

find-nearest-tailwind-colour's Introduction

Find the nearest Tailwind colour

Find the nearest Tailwind colour is a web app to help you find the nearest colour from the full Tailwind CSS colour palette.

https://find-nearest-tailwind-colour.edjohnsonwilliams.co.uk

Developing

Once you've created a project and installed dependencies with pnpm install, start a development server:

pnpm run dev

Building

pnpm run build

Thanks and credit

Thanks to Daniel Tao for his nearest-color package that has the algorithm to find the nearest colour.

find-nearest-tailwind-colour's People

Stargazers

Watchers

Forkers

slauzinho mindday bonbisu cymen web3templates buhodev tiamat-tech arifhossen-dev omairmir andrewrmillar gkn yudis10 arafays

find-nearest-tailwind-colour's Issues

Tailwind v4 support

Check if v4 colours are different

Add v4 page maybe? Or note on the v3.2+ page that v4 works?

https://github.com/tailwindlabs/tailwindcss/blob/9b4e93d808046e7212473ce6c054a00da76795d9/packages/tailwindcss/theme.css#L19

Update to TailwindCSS v3

First of all, I can't say how many times I have opened this little tool myself. It was really helpful to find matching colors in Tailwind. Thanks for making this tool :)

Now, TailwindCSS is to be updated to v3 and the alpha is already available. Can you port it to v3 now so it will be ready as soon as the v3 will be released to the public?

The main changes are there are no more extended colors and color names have changed.
For more info see this PR from Adam Wathan: tailwindlabs/tailwindcss#5384

Thanks so much!

Migrate to Typescript or add JSDoc

Things like the string to determine which version of Tailwind to use are a bit fragile without some types

Suggestion: Specify Tailwind version(s)

Hey, great tool!

However it suggested some colors unavailable in my TW version: "slate-100", "neutral-900", etc. After some digging I realized these are TW3 colors.

Perhaps on your app's page, specify the TW version(s) your tool works for.

thx

Add tests to check that correct colour is returned by different Tailwind version colour sets

Support multiple versions of Tailwind

It looks like Tailwind is about to add more colours in v3.3. There's a previous request to add support for v2. The tool currently supports Tailwind v3.0-v3.2.

It would be good to support all 3 options.

So we'll need to abstract out the colour data and allow different colour sets to be selected and used.

Early implementation ideas: It could be a selector or maybe one different page per version eg (/3.3plus, '/3.0_3.2, /2`). The colour data maybe should go into a Svelte store, I don't know. What should the default be? Probably the latest version? Although more people will be on 3.0-3.2 for quite a while

Master branch renamed to main

Instructions for updating

Switch to the "master" branch:

$ git checkout master

Rename it to "main":

$ git branch -m master main

Get the latest commits (and branches!) from the remote:

$ git fetch

Remove the existing tracking connection with "origin/master":

$ git branch --unset-upstream

Create a new tracking connection with the new "origin/main" branch:

$ git branch -u origin/main