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

Play with TailwindCSS in the Browser

play.tailwindcss.com

Post reply on HN
Print view View original

181–190 of 300 posts

Re: Play with TailwindCSS in the Browser

#181

Post by [deleted] »

calvinmorrison wrote: post #167
likortera wrote: post #166

Earlier quoted context omitted.

> It's basically the point of cascading style sheets The "cascading" part is what makes it incredibly complicated. Keeping the "cascade" in sync with the actual markup is not a trivial task in teams with many people of different skills levels. Not everyone is a top 1% dev, so we need easier and safer tools so that everyone can work and maintain a codebase. > Sticking to proper class names and elements makes reskinnin…

You're just shifting work though. The commit will now contain 10000 non html structure changes to an html, phtml, whatever, instead styles to a CSS sheet. Might as well go back to doing inline styles. There's a reason we don't do that anymore.

[deleted]

Re: Play with TailwindCSS in the Browser

#183

Post by tomtheelder »

f3b5 wrote: post #50
rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the fro…

Inline CSS has a few HUGE drawbacks compared to Tailwind, but I think the biggest by far is that your devs are totally unconstrained in what they can do for styling. You're forced to rely solely on convention to not, for example, violate your color palette, or use the wrong border radius, or the wrong padding value. For a small app with a small team and no concrete design system that's not a big deal. At scale that is absolutely massive.

A few of the other advantages of Tailwind: - reduced noise in the markup compared to raw inline styles, with the underlying styles getting cached by the browser - utility classes can contain multiple properties that should always go together - media queries!

You should learn what CSS is actually doing as well, but realistically Tailwind is, like you said, a pretty thin wrapper on CSS. Learning Tailwind usually just means learning CSS, with some different property names.

Re: Play with TailwindCSS in the Browser

#184

Post by tomtheelder »

mightybyte wrote: post #77
clementmas wrote: post #45

Earlier quoted context omitted.

Interesting. I like the idea of clean HTML. It's probably great for small projects but I'm not sure it would scale for bigger applications.

In my experience with larger applications no matter what CSS framework you use you eventually want to ditch it and move to fully custom CSS. Starting with this kind of a clean HTML base makes that easier IMO.

That was my experience... until I used Tailwind. The thing is, it basically is fully custom CSS. It's just inline since you already have a re-usability abstraction if you are building a component based application. It's not even really a CSS framework at all. It's infinitely less prescriptive than what you usually see.

Re: Play with TailwindCSS in the Browser

#185

Post by tomtheelder »

erokar wrote: post #105
halotrope wrote: post #71

There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it. I know it is conceptually "wrong" and a bunch of well crafted CSS classes would be more elegant. In the end it works, works really well and makes collaboration dead simple. Commonly used groups of classes can either be aliased by @apply or used in a (react) component. I used CSS way before Tailwind was a thing and in…

I've used Tailwind on many projects at work for about a year now. I do not like it. Tailwind seemingly affords an easy way of writing inline styles, but it 1) clutters the HTML, 2) leads to repetition and makes people break the DRY principle (yes, you should extract to components, but people don't always do that), 3) uses names that can be similar but are not identical to CSS properties and feels like a bad abstracti…

Component local CSS is fine too, as long as you use a theme system to constrain CSS choices. I think in practice they are pretty similar, but I personally way prefer the ergonomics of Tailwind.

Re: Play with TailwindCSS in the Browser

#186

Post by kristiandupont »

calvinmorrison wrote: post #162
likortera wrote: post #136

Earlier quoted context omitted.

Have you ever had to change the company's look and feel with anything else than tailwind? I had to do it with a BEM codebase, and I also had to do it with tailwind. The tailwind situation was by far the easiest one. And it was because I was not afraid to remove things that could break unrelated parts of the application. Not allowing developer to hand write CSS is a great restriction for a good bunch of developers. Th…

> Have you ever had to change the company's look and feel with anything else than tailwind? Yes, many times, with normal CSS. It's basically the point of cascading style sheets. Sticking to proper class names and elements makes reskinning a breeze.

Crazy, in my entire career I've never been involved in a redesign that didn't involve the entire layout but only changed some colors, paddings and drop shadows.

Re: Play with TailwindCSS in the Browser

#187

Post by my80thaccount »

kaba0 wrote: post #108
My90thaccount wrote: post #55

Earlier quoted context omitted.

Tailwind means making your HTML non-semantic, usually backed by JavaScript. This has created an arms race where parsers such as screen readers need to do ever-evolving heuristics to provide a reader mode. The code usually cannot be modified or even viewed in a readable form by users. Of all things, it's not user-centric. You're going to tell me next that you have a JSON interface instead. But that's a site-specific A…

Semantic web is a lie. HTML and CSS is not expressive enough in itself to pull that off - you are guaranteed to put many many divs purely for stylistic reason all around your website. Also, as mentioned there is nothing in tailwind requiring only divs, you can use any semantic tag you want, and the whole page can be completely static without an ounce of js.. At least know the topic you criticize.

No post body was provided.

Re: Play with TailwindCSS in the Browser

#188

Post by tomtheelder »

xkcd1963 wrote: post #139

I tried it out for a project and I regret it. Following reasoning: - CSS was created so no inline styling would be necessary. By assigning CSS attributes to classes we are back at inline styling. The html just explodes if you don't put the tailwind classes somewhere else, but then again, CSS is already here for that - one wastes time learning new naming conventions. Most frontend developers have internalised CSS attr…

I think there's a chance that you're using it in a project it isn't suited to. For your first reason, component driven applications provide a compelling reason to go "back" to inline styling. You already have your abstraction, and adding another one (cascading styles) does you no favors. It just creates two interleaving re-usability schemes that are a nightmare to maintain in parallel. This is the same reason that component-local CSS has become very popular.

Second one is a reasonable enough criticism. Never bothered me, but I think it's fair.

Third: it's really designed for bundled, JS-based, component driven applications. In that context it's a breeze to set up, and really no more difficult than native CSS. By the way, the reason they do that is so it can do some clever things like removing the utility classes from the CSS that you actually ship to reduce payload size. There's no reason that you can't just build the entirety of Tailwind and just ship that as your CSS.

Re: Play with TailwindCSS in the Browser

#189

Post by yurishimo »

irrational wrote: post #56
config_yml wrote: post #5

Earlier quoted context omitted.

As someone who's been doing CSS for 20 years now, I think Tailwind is an absolute blessing. They've gone a bit crazy with the latest features, but the core of it is so productive to use, especially in teams. Big fan here.

> They've gone a bit crazy with the latest features Can you elaborate? What are the latest features?

I think they are referring to custom values. As a part of the move to the JIT compiler, it's possible to define arbitrary classes and have Tailwind pick up on it and create a class.

Consider this. `text-red-500` is an out of the box class from TW that gives you a solid red text color. With the new JIT compiler, I can write `text-[#BADA55]` and the compiler is smart enough to generate a class with that hex code as the value for the color. You can use this syntax for almost any available class.

This feature is useful for some cases (marketing sites with finicky pixel perfect requirements) but it can also be abused. It's up to your team to decide where it makes sense to break out of the design system, or if you should add that new value as a token to be reused throughout the app.

Re: Play with TailwindCSS in the Browser

#190

Post by aidos »

fc373745 wrote: post #178
65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want.

The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.

Post reply on HN