5 ms·

"text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. The biggest benefit of this over inline styles is

"text-sm" is just font-size and text-gray is a color code, so the order of the classes doesn't matter either. 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. It takes some getting used to of the rules, but after a day or two I don't even need to think about what the class names are.

blattimwind 7y ago
> 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.
squeaky-clean 7y ago
(Also not a Tailwind user) I guess the common response to this is that well chosen semantic names usually help later down the line after these kinds of changes happen, especially with devs coming in and out. I've actually come across C code that had "#define ONE_THOUSAND_TWENTY_FOUR 4096" because that was the audio buffer size and later had to be increased to 4096 but the macro name was never changed. AUDIO_BUFFER_SIZE would probably have been a better name in the first place. Most code is not that bad though, haha. But that is still my first reaction. What if instead of slightly changing the gray color, you now want them to be blue and underlined? Or take HN for example, the username, vote buttons, and timestamp are all #828282, but have different class names. Is keeping this in sync ever a problem in Tailwind? This is only my first time looking at Tailwind, but it seems it's not really meant for "complex" apps where you'd run into these problems often?
- mike1o1 7y ago
  If I wanted to change all links from gray to blue/underlined, the best practice there would probably be to use a different utility class (text-blue-500 and underline) and update my templates/partials/whatever. I think for your specific example, I would use the `@apply` directive to apply certain utilities to all links. I've used Tailwind on large, complex apps with around 50 screens (so far), and using extracted components or partials hasn't been a problem at all with keeping things in sync. ``` a { @apply text-gray-700; } // now becomes a { @apply text-blue-500 underline; } ``` The documentation goes over this pretty well, I think. https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin...
  - saagarjha 7y ago
    What if I had two types of links, both of which were currently "text-blue-500 and underline" but I wanted to make one italics at some time in the future?
legostormtroopr 7y ago
> 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. This sounds like a boldRedText pattern to me [1]. I get the idea of adding utility classes that inherit the base classes, but altering the definition of the "gray" class to be some other color feels wrong. [1] http://thecodelesscode.com/case/95 http://thecodelesscode.com/case/95
- dwild 7y ago
  gray-700 isn't really 70% gray though, it's a darker gray than gray-600 and a lighter gray than gray-800. It also contains a bit more blue in it, which is actually quite common to do with gray. In reality I'm pretty sure that you wouldn't alter it directly either and that if you do, you would try to keep the 10 versions of it somewhat linear, or at least consistent with the use that you do of it. Theses colors are there for prototyping quickly yet still offering good looking result. Sure "color: gray" works, but look at the colors choices [1], it's much better than the default gray and offer more choice than lightgray, gray and darkgray without having to do math over #808080. [1] https://tailwindcss.com/docs/customizing-colors/#default-color-palette https://tailwindcss.com/docs/customizing-colors/#default-col...

blattimwind 7y ago

> 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.

squeaky-clean 7y ago

(Also not a Tailwind user) I guess the common response to this is that well chosen semantic names usually help later down the line after these kinds of changes happen, especially with devs coming in and out. I've actually come across C code that had "#define ONE_THOUSAND_TWENTY_FOUR 4096" because that was the audio buffer size and later had to be increased to 4096 but the macro name was never changed. AUDIO_BUFFER_SIZE would probably have been a better name in the first place. Most code is not that bad though, haha. But that is still my first reaction. What if instead of slightly changing the gray color, you now want them to be blue and underlined? Or take HN for example, the username, vote buttons, and timestamp are all #828282, but have different class names. Is keeping this in sync ever a problem in Tailwind? This is only my first time looking at Tailwind, but it seems it's not really meant for "complex" apps where you'd run into these problems often?

mike1o1 7y ago
If I wanted to change all links from gray to blue/underlined, the best practice there would probably be to use a different utility class (text-blue-500 and underline) and update my templates/partials/whatever. I think for your specific example, I would use the `@apply` directive to apply certain utilities to all links. I've used Tailwind on large, complex apps with around 50 screens (so far), and using extracted components or partials hasn't been a problem at all with keeping things in sync. ``` a { @apply text-gray-700; } // now becomes a { @apply text-blue-500 underline; } ``` The documentation goes over this pretty well, I think. https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin...
- saagarjha 7y ago
  What if I had two types of links, both of which were currently "text-blue-500 and underline" but I wanted to make one italics at some time in the future?

legostormtroopr 7y ago

> 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. This sounds like a boldRedText pattern to me [1]. I get the idea of adding utility classes that inherit the base classes, but altering the definition of the "gray" class to be some other color feels wrong. [1] http://thecodelesscode.com/case/95 http://thecodelesscode.com/case/95

dwild 7y ago
gray-700 isn't really 70% gray though, it's a darker gray than gray-600 and a lighter gray than gray-800. It also contains a bit more blue in it, which is actually quite common to do with gray. In reality I'm pretty sure that you wouldn't alter it directly either and that if you do, you would try to keep the 10 versions of it somewhat linear, or at least consistent with the use that you do of it. Theses colors are there for prototyping quickly yet still offering good looking result. Sure "color: gray" works, but look at the colors choices [1], it's much better than the default gray and offer more choice than lightgray, gray and darkgray without having to do math over #808080. [1] https://tailwindcss.com/docs/customizing-colors/#default-color-palette https://tailwindcss.com/docs/customizing-colors/#default-col...