Hacker News Reader

Comment by theturtletalks | Hacker News Reader

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.

View on HN

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.

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”

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

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.

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.

That's not quite the definition they are positing. Many of the classes in Tailwind have near or actual 1:1 mappings to CSS, but with slightly different names or semantics. A better JS analogy might be something like Coffeescript; I remember avoiding it because it felt a bit superfluous and hence not worth the tax (of adding a tool).

With Tailwind, whatever the actual merits, the biggest points of traction (IMHO) are the frankly excellent example sites[1]. You can click through numerous examples, all load quickly and without ads, that give you numerous variations of components, layouts, and even full pages. You can spin up a vanilla HTML or React app and ship good looking pages very quickly, esp. if you are bad at design.

[1]: https://tailwindui.com

I use Tailwind for a SaaS app because of TailwindUI and I'm pretty happy with it. I also used the Marketing page examples to put together a website[1] pretty quickly. When the app UI gets more complicated the need for design skills definitely creeps in. But, taking a step back, using a wireframing tool like Balsamiq, and having another look through the component catalog has gotten me pretty far. I'm happy with our ability to ship quickly.

[1]: https://truerev.com

Just an FYI, the logo on the site you posted gets deformed on mobile when there’s not enough space for it and the buttons on the right to live all on the same line.

This makes no sense. Tailwind is just another way of writing CSS, it's not premade styles.

> Tailwind allows them to add a few classnames and the page looks great

How is this the case any more than "raw CSS allows them to add a few styles and the page looks great"? You can't just haphazardly throw styles onto the page and it'll magically look good cause it was made in Tailwind. You design the exact same way you would if you were writing raw CSS, it's just you're putting the styles in the HTML class tags instead of modifying the CSS directly.

A person who's bad at CSS is not gonna be any better with Tailwind.

I wonder if the parent is mixing tailwind-ui and tailwind itself.

I don't see how tailwind makes it easy to design beautiful pages, not in an easier way than CSS.

What it does is ensuring Locality of Behaviour, and css properties not leaking in other component of a web application.

It's essentially the same as css scoped to a single component.

> I don't see how tailwind makes it easy to design beautiful pages, not in an easier way than CSS.

If you copy the examples in the Tailwind docs it looks like your ripped off Stripe. If you copy the examples in the MDN css docs it looks like you ripped off a decade old govt site.

Making your own class names arent a standard either. I dont see why you would reinvent and abstract things over and over again in every project?

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/

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.

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.

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.

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.

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

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.

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.

> 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 ;)

This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.

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

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?

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

[1] https://emotion.sh/docs/introduction

[2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

Vanilla-Extract is CSS-in-TS that compiles to raw CSS.

https://vanilla-extract.style

Use CSS modules then. The largest CSS file in the largest application I'm working on is around 200 lines (I prefer splitting everything into small components — easier to test, easier to reuse).

Reply on news.ycombinator.com