undefined | Better HN

0 pointsdwild6y ago0 comments

Someone else mentioned this and as I'm not a Tailwind user either, it made me understood a bit more the principle.

text-gray-700 is not a font-weight, it's a color predetermined by the framework. They aren't generated, they are hand picked by a designer. Each addition of 100 is a bit darker.

https://tailwindcss.com/docs/customizing-colors/#default-col...

So essentially, what's the difference between style="color: gray;" and class="text-gray-500" is mostly that you get a more beautiful gray (they add a bit of blue in it).

I guess "text-sm" is also similar, with an hand picked size which appear nice on every device and can be considered "small text".

0 comments

5 comments · 1 top-level

jhardy546y ago· 4 in thread

In that case, isn't that basically style="color: var(--gray-500);" with extra steps? I love to see people experiment for the sake of experimentation, but I'd be hesitant to adopt Tailwind as an engineer unless I understood why they weren't just CSS variables.

mike1o16y ago

They are variables in that they're specified in your Tailwind configuration file, which is what generates the utility classes that are generated. If you really wanted to you, you can extract it out as a variable if you wanted to use that color elsewhere, such as part of a box-shadow or background color or something like that.

  .custom-bg-color {
    background-color: theme('colors.gray.500');
  }

dwildOP6y ago

CSS variables are still relatively new though, unsupported until about March 2018 in all browsers, yet the first commit over TailwindCSS is from Jul 20, 2017, nearly a year before browsers even supported the feature. Even today it seems like 11% of users doesn't have support for variables. Could make sense to add support for variables now, but for the sake of backward compatibility, it does make sense to keep it with classnames too.

I love though that as an engineer you would be hesitant to use Tailwind, but you are not aware of how new variables are.

I think Tailwind seems to make sense for any prototypes works and probably even an MVP for a company that still doesn't have a shared CSS that represent the style of the company.

jhardy546y ago

My point isn't that Tailwind should've used CSS variables in 2017, it's that technology from 2017 isn't very compelling in 2020.

> I love though that as an engineer you would be hesitant to use Tailwind, but you are not aware of how new variables are.

Why would you think I'm unaware? Please see: https://caniuse.com/#feat=css-variables

I'm not writing software for IE 11 (released in 2013), Opera Mini, QQ, or Baidu, so CSS variables are widely supported for my target demographic.

whelming_wave6y ago

For plain old `text-gray-500`, they're pretty similar. One advantage that Tailwind has is screen sizes - you might write `flex items-center justify-between mobile:flex-col` for a row that turns into a column on smaller screens where the UI becomes awkward, for example.

j / k navigate · click thread line to collapse