3 ms·

> a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radi

by _akhe 2y ago

> a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands. > Tailwind makes box shadow easier Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows. That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid. I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).

ffsm8 2y ago
We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway
- _akhe 2y ago
  Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which). Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL
  - ffsm8 2y ago
    Knowing the shorthand and actually writing it are different things. If I get a visual spec from a designer, I'm not going to try out various numbers until it fits the image. I'll either ask them for the specific attribute if their tool allows for that or replicate it with a generator. And if I'm fully in control myself, I'm going to use a generator too as I'll want it to look a specific way, which is easier to achieve with instantaneous feedback as you get it from a generator such as https://www.cssmatic.com/box-shadow https://www.cssmatic.com/box-shadow
    - _akhe 2y ago
      > Knowing the shorthand and actually writing it are different things CSS shorthand meaning: margin: 0 0 1rem; which is the same as: margin-top: 0; margin-right: 0; margin-bottom: 1rem; margin-left: 0; etc. I can't imagine how you would know the shorthand without first knowing the longer form. CSS shorthand requires that you know the original form + the order of values in shorthand, and when values can be omitted along with special formatting as in: font: normal normal 1em/1.6em sans-serif; CSS shorthand is - I would say - more advanced than long form. > I'm going to ask the designer what units to use I would never get in the habit of letting a designer tell the front-end developers how to write CSS, mainly because they work in pixels, when the developer is often using viewport units, rem for sizing, em for fonts and icons relative to an initial size and current user zoom factor, and flex gaps and alignment for spacing. That level of collaboration and specification on spacing, sizes, etc. between the developer and designer (redlining) might be part of an initial design system discussion, but the resulting component library is probably translated into a style system that works well for the engineering team. I think it's good you're using CSS generators, I learned most of CSS that way via Dreamweaver, and have copy/pasted from CSS Tricks countless times for edge case stuff - it's a great way to learn.
- emseetech 2y ago
  | Did you ever actually write them fully by hand? Absolutely. Have for decades. Still do. This is why I said Tailwind reminds me of an ORM. If you properly know the underlying technology, it just gets in the way. And CSS is not just about properties. It's also about inheritance and DOM independence, something tailwind doesn't address.
Capricorn2481 2y ago
I meant that it's an extreme example of a tailwind utility doing a lot of settings for you. Versus, say, `italic`, which just does `font-style: italic;`. I can hardly compare that to an ORM where people can make full apps without learning SQL. > if you want something else that's up to you Right, just like CSS. It's a very light helper library that isn't dissimilar from CSS. That's my point.

by _akhe 2y ago

ffsm8 2y ago

We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway

_akhe 2y ago
Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which). Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL
- ffsm8 2y ago
  Knowing the shorthand and actually writing it are different things. If I get a visual spec from a designer, I'm not going to try out various numbers until it fits the image. I'll either ask them for the specific attribute if their tool allows for that or replicate it with a generator. And if I'm fully in control myself, I'm going to use a generator too as I'll want it to look a specific way, which is easier to achieve with instantaneous feedback as you get it from a generator such as https://www.cssmatic.com/box-shadow https://www.cssmatic.com/box-shadow
  - _akhe 2y ago
    > Knowing the shorthand and actually writing it are different things CSS shorthand meaning: margin: 0 0 1rem; which is the same as: margin-top: 0; margin-right: 0; margin-bottom: 1rem; margin-left: 0; etc. I can't imagine how you would know the shorthand without first knowing the longer form. CSS shorthand requires that you know the original form + the order of values in shorthand, and when values can be omitted along with special formatting as in: font: normal normal 1em/1.6em sans-serif; CSS shorthand is - I would say - more advanced than long form. > I'm going to ask the designer what units to use I would never get in the habit of letting a designer tell the front-end developers how to write CSS, mainly because they work in pixels, when the developer is often using viewport units, rem for sizing, em for fonts and icons relative to an initial size and current user zoom factor, and flex gaps and alignment for spacing. That level of collaboration and specification on spacing, sizes, etc. between the developer and designer (redlining) might be part of an initial design system discussion, but the resulting component library is probably translated into a style system that works well for the engineering team. I think it's good you're using CSS generators, I learned most of CSS that way via Dreamweaver, and have copy/pasted from CSS Tricks countless times for edge case stuff - it's a great way to learn.
emseetech 2y ago
| Did you ever actually write them fully by hand? Absolutely. Have for decades. Still do. This is why I said Tailwind reminds me of an ORM. If you properly know the underlying technology, it just gets in the way. And CSS is not just about properties. It's also about inheritance and DOM independence, something tailwind doesn't address.

Capricorn2481 2y ago

I meant that it's an extreme example of a tailwind utility doing a lot of settings for you. Versus, say, `italic`, which just does `font-style: italic;`. I can hardly compare that to an ORM where people can make full apps without learning SQL. > if you want something else that's up to you Right, just like CSS. It's a very light helper library that isn't dissimilar from CSS. That's my point.