Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Working with Tailwind CSS every day for 2 years

themosaad.com

Post reply on HN
Print view View original

101–110 of 215 posts

Re: Working with Tailwind CSS every day for 2 years

#101

Post by postalrat »

dmitriid wrote: post #91
atsjie wrote: post #84

Earlier quoted context omitted.

`.card-header__buttons` that example makes no sense unless you use global CSS/SASS, which very few projects do anymore. Component CSS/SCSS or CSS-in-JS are very common which resolve this scoping problem. So why bother with a DSL like Tailwind over Component CSS/SCSS for example?

How do you enforce consistency in CSS-in-JS? Paddings, margins, sizes, colors? Everywhere I've seen CSS-in-JS used, everywhere it's people busy writing bespoke styles in every file.

That's the same problem I see with tailwind.

I prefer a global set of styles and more specific selectors to override styles where needed. It may not work well on projects with many teams but for the projects I typically work on it's fine.

Re: Working with Tailwind CSS every day for 2 years

#102

Post by mind-blight »

karaterobot wrote: post #58
734129837261 wrote: post #22

I hate Tailwind with the passion of a million suns. It's loved by novices and those who don't know what they're doing, almost exclusively. They claim they know CSS, but will fail after any casual test. The best arguments against it: 1. Spamming utility classes causes horrible git commits, git history, git difference checks; 2. Conflicting utility classes aren't clear, and sometimes the order cannot be trusted; 3. Rep…

Pretty much every CSS framework I've ever seen (and certainly every CSS-in-JS solution I've ever seen) has as its underlying premise "we know you hate CSS, and want to avoid thinking about it as much as possible". For people like me (and perhaps you) who actually like CSS, our reaction is "why would I ever want to use something that abstracts away the power and flexibility of a thing I enjoy using?" The problem is th…

I actually think a lot of CSS-in-js frameworks became popular for the same reason that React became popular: css, html, and to some extent JavaScript can't really be decoupled.

Things like CSS Zen garden made it seem like they were, but that was only a separation of control. If the HTML structure changes, then the CSS likely needs to change. That's a tight coupling.

CSS-in-js embraces the coupling and makes it explicit instead of implicit, which makes refactoring safer and speeds up development.

edit for typo

Re: Working with Tailwind CSS every day for 2 years

#103

Post by chrisweekly »

734129837261 wrote: post #22

I hate Tailwind with the passion of a million suns. It's loved by novices and those who don't know what they're doing, almost exclusively. They claim they know CSS, but will fail after any casual test. The best arguments against it: 1. Spamming utility classes causes horrible git commits, git history, git difference checks; 2. Conflicting utility classes aren't clear, and sometimes the order cannot be trusted; 3. Rep…

Your comment would have been radically better if you'd omitted the first three sentences.

Re: Working with Tailwind CSS every day for 2 years

#104

Post by sgt »

unsupp0rted wrote: post #24
Zealotux wrote: post #3

I don't like Tailwind, except for pure layouting where it truly shines. My belief is this: we should think of layouting and styling as two distinct concepts and it doesn't help that CSS is used for both. After years of experimenting with various CSS approaches, I believe using Tailwind for layout and styled-components for styles is the ultimate setup for React applications.

Same feeling here. In Tailwind, I'll use a `p-3` or a `.flex.items-center` all day, but making a nice button is such a slog, since I'm coming from a Vuetify background. Vuetify also has the same layout classes as Tailwind, like `pa-3` and `.d-flex.align-center` I use Vuetify + Pug (instead of raw HTML templates), so I get to make buttons like this: v-btn(outlined color="accent" @click="handleClick") Do Stuff or a Dat…

The secret of TailwindUI is to take the HTML version of their code and just built your own components (e.g. if using VueJS). I would not use their suggested VueJS examples, as generally I prefer the options API.

It does however add some extra time to build your app - but consider that they have already built 90% for you - in terms of the design etc.

Re: Working with Tailwind CSS every day for 2 years

#105

Post by super256 »

Bilal_io wrote: post #54
super256 wrote: post #44

Earlier quoted context omitted.

When you pick up tailwind, you will automatically learn vanilla CSS along the way.

I like Tailwind, but I am not sure I'd recommend it to someone without prior experience and deep understanding of CSS. In my opinion, abstractions rarely teach us the underlying layers of a technology.

> I like Tailwind, but I am not sure I'd recommend it to someone without prior experience and deep understanding of CSS. In my opinion, abstractions rarely teach us the underlying layers of a technology.

I started with Tailwind and as I learned CSS along the way. Obviously people will look up stuff on MDN when they are stumbling on terms they didn't know about.

The tailwind docs + tw-intellisense plugin [1] are pretty good, too. Especially since the extension shows the raw CSS behind the abstraction when you hover over a class name.

[1] https://marketplace.visualstudio.com/items?itemName=bradlc.v...

Re: Working with Tailwind CSS every day for 2 years

#106

Post by danielvaughn »

nirvdrum wrote: post #90
bluetidepro wrote: post #39

Earlier quoted context omitted.

> It's loved by novices and those who don't know what they're doing, almost exclusively. They claim they know CSS, but will fail after any casual test. This is an incredibly silly take. As a senior frontend dev with almost 20 years of experience and a solid resume, I will take Tailwind over anything else in most cases. Obviously there is always exceptions based on the project needs, but to have such a hard take like…

I've been doing front-end development in some capacity almost as long as you, but it's not my forte. I've looked at Tailwind and I can see its value as a way to quickly prototype, but it also looks to violate the deeply instilled belief I have about semantically named classes. I know front-end development has changed its set of best practices several times now. We went from unobtrusive JS and semantic class names to…

I've been writing FE for 15 years and I'm in love with Tailwind. I never have to worry about naming, which in and of itself saves me a mountain of time. I had no idea just how much effort I spent on it until I stopped. Also, what I love about Tailwind is that it isn't an abstraction - the parent comment makes no sense because you can't use Tailwind without understanding CSS. But for those who do understand, it makes you so much more efficient, especially with a plugin like Tailwind Intellisense.

Your HTML will be uglier and it will be more difficult to look at the elements panel to find the element you're looking for. Both of those things are super minor for me, and have almost no impact on my day-to-day.

Re: Working with Tailwind CSS every day for 2 years

#107

Post by 9dev »

waboremo wrote: post #97
9dev wrote: post #89

Earlier quoted context omitted.

But p-4 is a variable: you can set the actual padding applied in the configuration file! It doesn’t have to mean 8px, but rather „standard amount of padding“. If you want to use „small amount of padding later on, you’ll use p-2 - whatever that means in your app. That solves the exact problem you and OP complain about, in a neat, configurable, safely replaceable way. Tailwind allows you to separate design intent from…

Vanilla CSS also allows this, without any real effort either. Tailwind's power is in its defaults, as soon as you want to start tinkering, you were much better suited sticking to vanilla CSS.

I didn’t dispute that. I just refuted parents point here.

Re: Working with Tailwind CSS every day for 2 years

#108

Post by danielvaughn »

waboremo wrote: post #98
hbn wrote: post #50

Earlier quoted context omitted.

I really don't get the "tailwind is for beginners" opinion I see parroted so much. It doesn't enable you to do anything that CSS didn't already do. It's just a different way of writing it. Knowing CSS is a prerequisite to being able to use Tailwind. "Tailwind is for beginners" just sounds to me like "I don't like this thing because I'm too smart for it"

Because Tailwind is often suggested as a way for novices to implement design without having to really learn CSS. Simultaneously, allows people who don't care at all for CSS or design to create something functional. Tailwind does not require knowing CSS. It'll get you around tailwind faster if you do know it, but you do not have to care about what Tailwind is really up to when adding "outline outline-2 p-4 outline-off…

Tailwind absolutely requires knowing CSS. You cannot effectively use `outline-2` without understanding what an outline is.

Re: Working with Tailwind CSS every day for 2 years

#109

Post by atsjie »

dmitriid wrote: post #91
atsjie wrote: post #84

Earlier quoted context omitted.

`.card-header__buttons` that example makes no sense unless you use global CSS/SASS, which very few projects do anymore. Component CSS/SCSS or CSS-in-JS are very common which resolve this scoping problem. So why bother with a DSL like Tailwind over Component CSS/SCSS for example?

How do you enforce consistency in CSS-in-JS? Paddings, margins, sizes, colors? Everywhere I've seen CSS-in-JS used, everywhere it's people busy writing bespoke styles in every file.

> How do you enforce consistency in CSS-in-JS? Paddings, margins, sizes, colors? JavaScript variables, css variables? Both can be used. It's pretty trivial tbh.

Re: Working with Tailwind CSS every day for 2 years

#110

Post by spoils19 »

nirvdrum wrote: post #90
bluetidepro wrote: post #39

Earlier quoted context omitted.

> It's loved by novices and those who don't know what they're doing, almost exclusively. They claim they know CSS, but will fail after any casual test. This is an incredibly silly take. As a senior frontend dev with almost 20 years of experience and a solid resume, I will take Tailwind over anything else in most cases. Obviously there is always exceptions based on the project needs, but to have such a hard take like…

I've been doing front-end development in some capacity almost as long as you, but it's not my forte. I've looked at Tailwind and I can see its value as a way to quickly prototype, but it also looks to violate the deeply instilled belief I have about semantically named classes. I know front-end development has changed its set of best practices several times now. We went from unobtrusive JS and semantic class names to…

Don't follow the hype and trust your own experiences and tooling. Tailwind can be good, but I get the sense that many commenters (not in this thread, however) may be paid actors in order to boost its mindshare.
Post reply on HN