https://javisperez.github.io/tailwindcolorshades/

Color shades generator for TailwindCSS - https://javisperez.github.io/tailwindcolorshades
https://javisperez.github.io/tailwindcolorshades/

colors colorschemes helper laravelmix tailwindcss vue

Last synced: about 2 months ago
JSON representation

Color shades generator for TailwindCSS - https://javisperez.github.io/tailwindcolorshades

• Host: GitHub
• URL: https://javisperez.github.io/tailwindcolorshades/
• Owner: javisperez
• License: mit
• Created: 2018-01-16T02:22:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-04T01:43:45.000Z (6 months ago)
• Last Synced: 2024-05-21T00:56:28.967Z (4 months ago)
• Topics: colors, colorschemes, helper, laravelmix, tailwindcss, vue
• Language: Vue
• Homepage:
• Size: 4.4 MB
• Stars: 726
• Watchers: 7
• Forks: 61
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Color shades generators for TailwindCSS

[![CircleCI branch](https://img.shields.io/circleci/project/github/javisperez/tailwindcolorshades/master.svg)](https://circleci.com/gh/javisperez/tailwindcolorshades/tree/master)

## To use this app

Go to [https://javisperez.github.io/tailwindcolorshades](https://javisperez.github.io/tailwindcolorshades)

## What is this?

Is a tool to make shades and tints for a given color and generate the proper code for the **TailwindCSS** config file.

The idea is to make the custom color generation a bit easier when creating custom color variants to use in your app's CSS.

## How to use it

Just place a name and a color on the inputs and will generate 5 tints (50, 100, 200, 300, 400) and 5 shades (600, 700, 800, 900, 950) for that given color. An automatic name generation will be used for the css class names but you can rename them at anytime.

After that you can copy/paste the generated colors into your Tailwind config file and start using them in your css.

## Contributions

Feel free to fork this repo and send any Pull Request you want, every help is very much welcome :)