DEV Community 👩‍💻👨‍💻

Discussion on: Why Tailwind Isn't for Me

Collapse
dansvel profile image
dan

i surely can learn css,, i understand a bit,,

but choosing a color is hard to me,, need to knkw what hex color everytime i need coloring text or background,,

tailwind help me to simplify of doing that,, in same color i can use 9 sub-color

i even dont know what hex is, i can use text-green-400 hover:text-green-600 for my styling my link

if only pure css can do it too, may be i'll learn more,,

Collapse
jaredcwhite profile image
Jared White Author

Tailwind has an awesome color palette. Even Shoelace, the component library mentioned in the article, has adopted colors from Tailwind. I think you could maybe import Shoelace's base stylesheet and use their CSS variables for colors, even if you don't use any of their components! 🤔

Collapse
dansvel profile image
dan

oh,,,
so i can use it like this,,?

import "something"

body{
  background-color: var(--gray-100);
  color: var(--gray-900);
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
jaredcwhite profile image
Jared White Author

Exactly — you'd just reference the relatively small Shoelace CSS file of all the variables. Here's an overview of the colors: shoelace.style/tokens/color

Thread Thread
dansvel profile image
dan

wow,, nice to know,, thanks

Collapse
nikkicat profile image
nikki-cat • Edited on

I mean... A lot of IDEs will actually pop up a color picker for you nowadays, so it's really not the best counter or supporting argument.

Also, CSS has string names for common colors.
And also, you can use RGB(x, y, z)... All it takes is learning a bit about color theory.
Hex works in the same way kind of. Its a base 16 code consisting of 3 pairs of numbers
#00 99 FF
---r--g--b^

so if I write #0000FF, that means 0 red, 0 green and 16 blue(because F is 16 in hex), meaning there is only blue in the mix, so of course the color will be blue.

if you type #FF00FF, you now mixed in an equal amount of red, which gives purple.

If you are confused about what base 16 means, you should look it up :) Its interesting, and in learning it, you will probably also learn about Binary numbers which are base 2.
Base two means, that the number scale only goes up twice, before moving on to the next "level"..

The normal number scale, aka 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, is base 10, because it goes up 10 ciphers before "resetting" and reusing its own symbols again to count further.
In this instance, the number 10 consists of the next smallest number after the starting one which is 0... and then you add the smallest possible number after that, so you get 1 concatenated with 0.