i’m not a frontend engineer so don’t know the difference between text- and font- without looking but that’s another good example of why frameworks are great: 6px is an explicit size, where md, 2xl, etc are all relative… per project you can decide what those sizes are and everything just falls into place… you rarely really care what the size is in pixels; mostly you only care about sizes relative to other parts of the UI… so again, people joining on a project don’t need to memorise magic numbers, because they just know without needing to guess what the size suffixes are
i’ve only recently started to use tailwind (originally i saw no point, pretty much for the reasons you’re stating: why use classes like that when you can just use styles on the element and we know that’s bad) but since i embraced it i’ve started writing quality components much much faster… especially for layout like flexbox and grid it just flows really nicely, and i really don’t find that it feels like i’m repeating myself at all (partly because “repeating yourself” should be avoided by simply using components these days: CSS is an over-complicated and ill-fitting solution to the problem of styling in modern UIs)
(okay i looked up text- and font-: text is size, font is weight… which tracks with my understanding of the other parts of tailwind and the way type is handled in software generally… i think there are no good options here)
per project you can decide what those sizes are and everything just falls into place… you rarely really care what the size is in pixels; mostly you only care about sizes relative to other parts of the UI… so again, people joining on a project don’t need to memorise magic numbers, because they just know without needing to guess what the size suffixes are
You can do all that with a CSS variable though…
I think the text- and font- prefixes are emblematic though; because you end up with this soup of classes on every single element, they have to be as short as possible, and so they can’t use font-size and font-weight.
I can imagine it working nicely for flexbox, because that is complicated, but I still suspect you’re better off just using the effort you would need to learn the tailwind classes to instead learn plain flexbox.
and then people have to learn what it all means, where those variables are, how your mess of custom CSS hangs together, and probably what overrides what in your hierarchy
you end up with this soup of classes on every single element
it’s either than or a soup of stuff in CSS. the difference is largely academic in modern HTML because it’s all contained in components anyway
they have to be as short as possible, and so they can’t use font-size and font-weight.
they don’t have to be; they could easily use font size and font weight, but i much much prefer the -lg notation… it makes your flow so much quicker. it reduces cognitive load significantly
I still suspect you’re better off just using the effort you would need to learn the tailwind classes to instead learn plain flexbox.
i know flexbox and grid plenty well, and similar applies across the board for things like tailwind: containing everything together so that you don’t have to mess around switching between different places to define things, and using classes that kinda just represent what you want in shorthand literally makes my frontend development literally 10x quicker, and just feel smoother… even when i’m just doing personal projects
you don’t have to believe me; that’s fine… but i used to think similarly to you, had a couple of failed attempts and hated tailwind, and my most recent personal projects it just clicked and everything feels so nice. i’m a principal engineer, and have done plenty of work on all kinds of projects so it’s not like i’m inexperienced and just go with the latest fad. these small time savings really add up
i’m not a frontend engineer so don’t know the difference between text- and font- without looking but that’s another good example of why frameworks are great: 6px is an explicit size, where md, 2xl, etc are all relative… per project you can decide what those sizes are and everything just falls into place… you rarely really care what the size is in pixels; mostly you only care about sizes relative to other parts of the UI… so again, people joining on a project don’t need to memorise magic numbers, because they just know without needing to guess what the size suffixes are
i’ve only recently started to use tailwind (originally i saw no point, pretty much for the reasons you’re stating: why use classes like that when you can just use styles on the element and we know that’s bad) but since i embraced it i’ve started writing quality components much much faster… especially for layout like flexbox and grid it just flows really nicely, and i really don’t find that it feels like i’m repeating myself at all (partly because “repeating yourself” should be avoided by simply using components these days: CSS is an over-complicated and ill-fitting solution to the problem of styling in modern UIs)
(okay i looked up text- and font-: text is size, font is weight… which tracks with my understanding of the other parts of tailwind and the way type is handled in software generally… i think there are no good options here)
You can do all that with a CSS variable though…
I think the text- and font- prefixes are emblematic though; because you end up with this soup of classes on every single element, they have to be as short as possible, and so they can’t use
font-sizeandfont-weight.I can imagine it working nicely for flexbox, because that is complicated, but I still suspect you’re better off just using the effort you would need to learn the tailwind classes to instead learn plain flexbox.
and then people have to learn what it all means, where those variables are, how your mess of custom CSS hangs together, and probably what overrides what in your hierarchy
it’s either than or a soup of stuff in CSS. the difference is largely academic in modern HTML because it’s all contained in components anyway
they don’t have to be; they could easily use font size and font weight, but i much much prefer the -lg notation… it makes your flow so much quicker. it reduces cognitive load significantly
i know flexbox and grid plenty well, and similar applies across the board for things like tailwind: containing everything together so that you don’t have to mess around switching between different places to define things, and using classes that kinda just represent what you want in shorthand literally makes my frontend development literally 10x quicker, and just feel smoother… even when i’m just doing personal projects
you don’t have to believe me; that’s fine… but i used to think similarly to you, had a couple of failed attempts and hated tailwind, and my most recent personal projects it just clicked and everything feels so nice. i’m a principal engineer, and have done plenty of work on all kinds of projects so it’s not like i’m inexperienced and just go with the latest fad. these small time savings really add up