Add additional color utility classes similar to tailwind

[stillhart-at-bechterew]

Introduction

I recently began using Tailwind in a new project and have been very pleased thus far. Yet, overall, I can see that I am losing a lot of speed and convenience compared to the bootstrap. One thing I noticed that I often felt missing since Bootstrap 2 was a way to customize the colors easily. I often felt constrained by the choice of only a few color groups (white, dark, success, primary, warning, and error), yet I didn't want to overwrite them. I wish I could color certain components easily while adhering to some loose form of color schema. Tailwind solved this very nicely with their utility classes.

Examples

bg-gray-50 # background in gray intensity 50, light gray
bg-blue-100 # background in blue intensity 100, less light blue
bg-sky-900 # background in "sky" intensity 900, pretty dark blue.
border-blue-100
border-sky-200
text-fuchsia-400
dark:text-red-500 # set the text color to red in darkmode

Even further, these colors can be extended with a nice set of state modifiers:

hover:bg-red-500
focus:border-green-200
active:text-purple-800
dark:hover:text-white # set the text color to white in dark mode on hover

These can also be applied to certain borders only:

border-l-sky-300 # border left in color sky intensity 300
border-r-sky-300 # border right in color sky intensity 300
border-x-sky-300 # border right,left in color sky intensity 300
border-y-sky-300 # border top,bottom in color sky intensity 300

A theoretical button example

This enables one to create a custom button quite easily while being somewhat harmonic in terms of colors.

<div class="btn text-violet-800 border-violet-300 bg-violet-300 hover:bg-violet-400 hover:border-violet-500 active:bg-violet-500 active:border-violet-600">
  What a nice custom violet button
</div>

Simplicity

Personally, I do not like the large numbers used and I see no reason why it shouldn't be something like "text-blue-5" instead of "text-blue-500".

<div class="btn text-violet-8 border-violet-3 bg-violet-3 hover:bg-violet-4 hover:border-violet-5 active:bg-violet-5 active:border-violet-6">
  What a nice custom violet button
</div>

Why don't you write css instead?

That is certainly possible, but I would most likely be forced to select a new set of colors each time. I do like the large but limited variety of colors given by Tailwind. 

Conclusion

I am not a big fan of writing Tailwind since the difference between plain CSS and Tailwind is too minimal. Also, in Tailwind, I am forced to fix many browser quirks that are already solved with bootstrap. Yet, these color classes provided me with a very nice value-add compared to plain CSS. Therefore, I think they might be the right thing to be included in bootstrap as a new feature. There is no reason to remove the current color classes either; they could live side-by-side. text-success and text-green-700

Tailwind documentation

https://tailwindcss.com/docs/background-color
https://tailwindcss.com/docs/border-color
https://tailwindcss.com/docs/text-color

[WinterSilence]

this "class" noodle same to using unrecommended inline styles

[stillhart-at-bechterew]

I agree, it's why the names should be shorter.

[WinterSilence]

@stillhart-at-bechterew unreadable names too bad practice, use compositions of placeholders https://gist.github.com/WinterSilence/dde4e43f52f20a2dfb3375ffa70a008c