5 ms·

> The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only nee

> The biggest benefit of this over inline styles is that if I decide to change the color of "gray-700", since those colors come from a configuration, I only need to change it in my configuration. But gray-700 says it's a 70 % gray. Changing it to something else is akin to changing "color: #666" to "color: #444" through redefinition (JS?).

mike1o1 7y ago
No, "gray-700" doesn't mean it's 70% gray. The term "700" is just referring to a color on a scale. I don't even need to name it "700", I can name it "dark" or whatever I want (which is what previous versions of Tailwind used). i.e. "text-gray-dark", or "text-gray-700", would have a class with a single css property: color: #4A5568; By default Tailwind comes with a default color palette with hand picked colors. They were hand picked by a designer, not determined through an algorithm. https://tailwindcss.com/docs/customizing-colors#default-color-palette https://tailwindcss.com/docs/customizing-colors#default-colo...
- deleted 7y ago
  [deleted]
- stanmancan 7y ago
  The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.
  - 6510 7y ago
    #000000 is black #FFFFFF is white They are 3 sets of 2 hex numbers. #FF0000 is red #00FF00 is green #0000FF is blue (you hear of RGB, Red Green Blue, in that order) Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF If you don't like hex there is rgb(0,0,255) which does exactly the same. There is also rgba(0,0,255,0-1) with an alpha channel. You can also put any part of that in a css variable and use it where you like. body{--foo: 0,0,255,0.5; bar:0,0,100 } p {background: rgba(var(--foo)) } div {background: rgba(var(--bar), 0.8) }
    - mike1o1 7y ago
      Sure, but the colors from Tailwind aren't determined through an algorithm like this. They are handpicked from a designer, which I feel like most design systems do as well.
    - dsego 7y ago
      RGB isn't even a good system to lighten or darken colors. CSS supports HSL which is certainly more intuitive. Then again, it's easier to use a good pre-processor with color functions to darken($color, 10%) and so on (quickly, can you tell me what is 10% lighter than 2222FF off the top of your head?). Still, in the end it makes most sense to use tones from a good color palette then to mess around with hex values.

mike1o1 7y ago

No, "gray-700" doesn't mean it's 70% gray. The term "700" is just referring to a color on a scale. I don't even need to name it "700", I can name it "dark" or whatever I want (which is what previous versions of Tailwind used). i.e. "text-gray-dark", or "text-gray-700", would have a class with a single css property: color: #4A5568; By default Tailwind comes with a default color palette with hand picked colors. They were hand picked by a designer, not determined through an algorithm. https://tailwindcss.com/docs/customizing-colors#default-color-palette https://tailwindcss.com/docs/customizing-colors#default-colo...

deleted 7y ago
[deleted]
stanmancan 7y ago
The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.
- 6510 7y ago
  #000000 is black #FFFFFF is white They are 3 sets of 2 hex numbers. #FF0000 is red #00FF00 is green #0000FF is blue (you hear of RGB, Red Green Blue, in that order) Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF If you don't like hex there is rgb(0,0,255) which does exactly the same. There is also rgba(0,0,255,0-1) with an alpha channel. You can also put any part of that in a css variable and use it where you like. body{--foo: 0,0,255,0.5; bar:0,0,100 } p {background: rgba(var(--foo)) } div {background: rgba(var(--bar), 0.8) }
  - mike1o1 7y ago
    Sure, but the colors from Tailwind aren't determined through an algorithm like this. They are handpicked from a designer, which I feel like most design systems do as well.
  - dsego 7y ago
    RGB isn't even a good system to lighten or darken colors. CSS supports HSL which is certainly more intuitive. Then again, it's easier to use a good pre-processor with color functions to darken($color, 10%) and so on (quickly, can you tell me what is 10% lighter than 2222FF off the top of your head?). Still, in the end it makes most sense to use tones from a good color palette then to mess around with hex values.