7 ms·

Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when the

Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.

bboylen 4y ago
I think its possible to forget some of the exact names, but most of the Tailwind classes are just shorthands for the CSS styles. Furthermore, even if you develop in Tailwind, you still see the normal CSS style names when using browser tools. If you decided to do a project in vanilla CSS, I'm sure the style names would come back very quickly.
hbn 4y ago
I should clarify, I wasn't a beginner when I started using Tailwind. I already had frontend experience, it's just my current job already had started using Tailwind in all their webapps before I started. I don't think Tailwind is the place to start learning CSS. Tailwind is just a more efficient way to write CSS, and you should be aware of what's going on under the hood. It doesn't mean if you're writing your CSS in Tailwind you're never gonna look at normal CSS. There's plenty of times when I'm iterating on a design and I'll hop into the "Styles" section of my console and directly edit the element.style{} section, writing normal CSS to mock something out before translating it back into Tailwind in my editor. So I certainly haven't forgotten normal CSS names. Not to mention the Tailwind names generally match up pretty closely with the underlying CSS names. It's only minor translations to go between the two, and maybe a special case here or there. The documentation[1] is very good with a quick search can type CSS or Tailwind names into to find what you want, and it'll show both the Tailwind name and the CSS attributes/values it outputs so I tend to keep that open in a tab while I work. [1] https://tailwindcss.com/docs/ https://tailwindcss.com/docs/
- greenhatman 4y ago
  For me Tailwind is sort of a shortcut to learning best practices. If I had to research and figure out best practices on my own it would take ages. Instead I can just see what Tailwind does. E.g. when to use em vs px. That kind of stuff.
a-priori 4y ago
Honestly I just don't see how it's possible to 'forget CSS' with Tailwind. I mean, the classes mostly map 1:1 to CSS properties. As someone who has been writing CSS for approximately a billion years (actual number more like 13 years) I'm a fan of Tailwind and don't see how it's a 'beginner' thing at all. It solves real-world problems building web applications, and actually many of those problems only come up when you're building large, long-lived applications with many contributing developers which is precisely the kind of thing beginners aren't in charge of.
- hardwaregeek 4y ago
  Tbh a lot of times when people say beginner they really mean “this is way easier than the way I’m used to, and that freaks me out because it means the old way is redundant, so I’ll claim this is for beginners”
  - theturtletalks 4y ago
    By beginners, I meant people who know HTML and some CSS, but not enough to design a great UI. Tailwind allows them to add a few classnames and the page looks great. On the flip side, you have a developer who can design using CSS. Tailwind comes along and, although it’s great, you’re learning new classnames and now you’re no longer using web standard properties (CSS).
    - graydsl 4y ago
      By that definition it would be hard to justify anything besides HTML, JS and CSS. That would also exclude TypeScript and every JS Framework there is on earth. That's hard to justify from every angle (development and business wise) imho.
      - theturtletalks 4y ago
        Justifying using Tailwind, Typescript, JS Framework, etc. comes down to how much value they provide to each user and how much time they save. For example, building your own type system or JS framework would require a lot more code and man-hours than using margin: 4px vs m-2.
dmitriid 4y ago
> The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. And then they end up with dozens (and in big project hundreds) of bespoke CSS class names that no one can remember or keep track of, and just add new ones to the ever expanding file ;)
- theturtletalks 4y ago
  This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.
  - dmitriid 4y ago
    That's why the wink ;) I used to sort of like CSS-in-JS, but on larger projects it also quickly devolves into "I know we have a design system, no idea what we have there, here are one-off CSS styles for this particular component" Everything is with its trade-offs alas sigh
  - tevon 4y ago
    I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?
    - theturtletalks 4y ago
      I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read. Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all. [0] https://mantine.dev https://mantine.dev [1] https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/?itm_campaign=rightbar_v2&itm_source=infoq&itm_medium=news_link&itm_content=link_text https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...
antihero 4y ago
I’m not sure why it’s limited to beginners. I’ve been writing CSS for 20+ years and found it tedious, error prone, difficult to manage, and irritating. Tailwind honestly made me enjoy doing web again.
- theturtletalks 4y ago
  It’s definitely not limited to beginners. Huge companies are using Tailwind in production. I prefer CSS-in-JS and haven’t faced enough issues to switch.
sangnoir 4y ago
Have you ever had the 'pleasure' of maintaining someone else's non-trivial, non-framework CSS? I have, and it was no fun at all. For all the crap they get, frameworks allow for knowledge transfer across projects/teams/employers.
- amrocha 4y ago
  I've had the pleasure of trying to maintain a tailwind codebase written by 2 junior devs over a year and let me tell you, that wasn't easy either
antihero 4y ago
I know CSS and have been using it for over two decades. I found that using Tailwind was like having a mental burden taken from me. I don't care about exact pixel values, most of the time, I just want a consistent UI with "some level of spacing". I don't want to do strange niche stuff 99% of the time. Tailwind's strength is the constraints and defaults it provides you.

bboylen 4y ago

I think its possible to forget some of the exact names, but most of the Tailwind classes are just shorthands for the CSS styles. Furthermore, even if you develop in Tailwind, you still see the normal CSS style names when using browser tools. If you decided to do a project in vanilla CSS, I'm sure the style names would come back very quickly.

hbn 4y ago

I should clarify, I wasn't a beginner when I started using Tailwind. I already had frontend experience, it's just my current job already had started using Tailwind in all their webapps before I started. I don't think Tailwind is the place to start learning CSS. Tailwind is just a more efficient way to write CSS, and you should be aware of what's going on under the hood. It doesn't mean if you're writing your CSS in Tailwind you're never gonna look at normal CSS. There's plenty of times when I'm iterating on a design and I'll hop into the "Styles" section of my console and directly edit the element.style{} section, writing normal CSS to mock something out before translating it back into Tailwind in my editor. So I certainly haven't forgotten normal CSS names. Not to mention the Tailwind names generally match up pretty closely with the underlying CSS names. It's only minor translations to go between the two, and maybe a special case here or there. The documentation[1] is very good with a quick search can type CSS or Tailwind names into to find what you want, and it'll show both the Tailwind name and the CSS attributes/values it outputs so I tend to keep that open in a tab while I work. [1] https://tailwindcss.com/docs/ https://tailwindcss.com/docs/

greenhatman 4y ago
For me Tailwind is sort of a shortcut to learning best practices. If I had to research and figure out best practices on my own it would take ages. Instead I can just see what Tailwind does. E.g. when to use em vs px. That kind of stuff.

a-priori 4y ago

Honestly I just don't see how it's possible to 'forget CSS' with Tailwind. I mean, the classes mostly map 1:1 to CSS properties. As someone who has been writing CSS for approximately a billion years (actual number more like 13 years) I'm a fan of Tailwind and don't see how it's a 'beginner' thing at all. It solves real-world problems building web applications, and actually many of those problems only come up when you're building large, long-lived applications with many contributing developers which is precisely the kind of thing beginners aren't in charge of.

hardwaregeek 4y ago
Tbh a lot of times when people say beginner they really mean “this is way easier than the way I’m used to, and that freaks me out because it means the old way is redundant, so I’ll claim this is for beginners”
- theturtletalks 4y ago
  By beginners, I meant people who know HTML and some CSS, but not enough to design a great UI. Tailwind allows them to add a few classnames and the page looks great. On the flip side, you have a developer who can design using CSS. Tailwind comes along and, although it’s great, you’re learning new classnames and now you’re no longer using web standard properties (CSS).
  - graydsl 4y ago
    By that definition it would be hard to justify anything besides HTML, JS and CSS. That would also exclude TypeScript and every JS Framework there is on earth. That's hard to justify from every angle (development and business wise) imho.
    - theturtletalks 4y ago
      Justifying using Tailwind, Typescript, JS Framework, etc. comes down to how much value they provide to each user and how much time they save. For example, building your own type system or JS framework would require a lot more code and man-hours than using margin: 4px vs m-2.

dmitriid 4y ago

> The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. And then they end up with dozens (and in big project hundreds) of bespoke CSS class names that no one can remember or keep track of, and just add new ones to the ever expanding file ;)

theturtletalks 4y ago
This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.
- dmitriid 4y ago
  That's why the wink ;) I used to sort of like CSS-in-JS, but on larger projects it also quickly devolves into "I know we have a design system, no idea what we have there, here are one-off CSS styles for this particular component" Everything is with its trade-offs alas sigh
- tevon 4y ago
  I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?
  - theturtletalks 4y ago
    I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read. Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all. [0] https://mantine.dev https://mantine.dev [1] https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/?itm_campaign=rightbar_v2&itm_source=infoq&itm_medium=news_link&itm_content=link_text https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

antihero 4y ago

I’m not sure why it’s limited to beginners. I’ve been writing CSS for 20+ years and found it tedious, error prone, difficult to manage, and irritating. Tailwind honestly made me enjoy doing web again.

theturtletalks 4y ago
It’s definitely not limited to beginners. Huge companies are using Tailwind in production. I prefer CSS-in-JS and haven’t faced enough issues to switch.

sangnoir 4y ago

Have you ever had the 'pleasure' of maintaining someone else's non-trivial, non-framework CSS? I have, and it was no fun at all. For all the crap they get, frameworks allow for knowledge transfer across projects/teams/employers.

amrocha 4y ago
I've had the pleasure of trying to maintain a tailwind codebase written by 2 junior devs over a year and let me tell you, that wasn't easy either

antihero 4y ago

I know CSS and have been using it for over two decades. I found that using Tailwind was like having a mental burden taken from me. I don't care about exact pixel values, most of the time, I just want a consistent UI with "some level of spacing". I don't want to do strange niche stuff 99% of the time. Tailwind's strength is the constraints and defaults it provides you.