Live data from Hacker News

TailwindCSS v2.0

blog.tailwindcss.com

131–140 of 474 posts

Re: TailwindCSS v2.0

#131

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

I'll identify as in the "not yet convinced" category on Tailwind (though, I have evolved on other paradigms, which I will now discuss). JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because 1. JSX isn't HTML, it's a sugared syntax for the React.createElement API and 2. that separation wasn't meaningfully improving my architecture and in retrospe…

> JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because

The line React core team would say is that that what you're thinking of isnt "seperation of concerns" but rather "seperation of technologies".

React/JSX is good because both the HTML and JS together is the view. It's the same concern.

React seperates concerns much better because it so heavily promotes the functional programming approach and that the UI is a function of state.

Re: TailwindCSS v2.0

#133

I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…

Theming can be done for specific types of elements but also your own keys like "primary", "secondary", etc. You should be able to change the color in one place.

Re: TailwindCSS v2.0

#134
post #104

Earlier quoted context omitted.

Pretty nice, thanks!

It's still pretty immature and buggy, so unless you have no problem fixing blocking issues yourself I'll suggest waiting until it becomes more mature.

I don't need it today, but would be nice to have something like that in the future :)

Re: TailwindCSS v2.0

#135
post #76

Earlier quoted context omitted.

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

that's ridiculous, why not just write padding: 2px 5px; display: flex; align-items: center; color: #fff; You are basically just creating a set of attributes that just mimic standard css properties, I find this approach of tailwind absolutely counter productive, and I am surprised that it gets so much popularity.

I used to think the same way until i tried it, now i'm completely hooked. it actually makes sense not to extract everything in a "class" simply to separate the presentation out, since that class probably isn't reusable.

plus, it's mostly made to be used with vue/react components which should be small standalone units.

I'm personally looking forward to building websites since using tailwind after a long time

Re: TailwindCSS v2.0

#136
post #110

"Incompatibility with IE11, so you can tell the man upstairs 'sorry boss it's out of my hands, blame Tailwind'..." I know it's said tongue-in-cheek, but popular frameworks taking this stance is valuable when convincing clients, leaders, authority, etc. to not require IE support. I've consulted on dozens of front-end projects, and showing the stance of "industry leaders" is the most convincing argument.

At this point even JIRA and Microsoft 365 have dropped support for IE11. The majority of big corporates have either moved to Chrome or are hurriedly doing so. However, there are presumably old computers in far-off corners of the world that still use IE11. I wonder what will happen there...

Microsoft, in general, doesn't even really "support" IE as a general purpose browser. They view it as a compatibility platform for old IE-only apps.

Edge is Microsoft's only general purpose browser ATM.

Re: TailwindCSS v2.0

#137

I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…

Tailwind is completely flexible, if you would rather have your colors be `brand-light', `brand-dark`, etc you can. Just update your config however you want. It just comes with a config out of the box that is highly usable for any app and any need without customizing. Purge then allows you to strip out all the extra unused CSS in production.

Ok, so I could mark everything as "brand-dark" and then change the definition of that in the CSS? Mmm. Ok. How about layout and sizing? A lot of that looks a lot more defined - I'll pick a random example from their own homepage then: "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" - if I wanted to change my approach to centring, justification, and sizing, it still seems like a lot of search and replace...

(I think I understand that the approach is that I'd then change what those definitions mean centrally - but that won't help me if I decide that two properties which are currently different should be the same, or vice versa).

Re: TailwindCSS v2.0

#138

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

What benefit does having completely readable HTML offer?

Why? Because it makes the document readable... for machines.

You may think about browsers, but if your HTML is a mess, devices that translate content into Braille or read it as audio, won't be able to make sense of it.

That might not sound like a problem, but this might very well cause legal issues in some business cases (e.g. people with an impairment can't access a website of a public administration? That might be a civil rights violation in some countries).

Another reason is because it makes it easier to extract data and information from HTML documents: search engines and search spiders. If your HTML is a mess, you're going to take a SEO hit.

That's just two concrete concerns that come to my mind right now.

HTML and CSS today are mostly used for presentational & interactive purposes: push UI components in there right place, with the desired shapes, colours, fonts, animations and so on, in order to build complex interactive applications.

But HTML wasn't originally conceived for that purpose. The word "markup" says all you need to know. The entire purpose of a HTML tag was simply to describe the structure of a text document: this bit here is the header, that bit is a paragraph, the next bit contains an image, and here are a few meta tags with extra information about the document you're reading.

However, as markets drove demand for more and more interactivity - applications in browsers rather then just static documents - browser technologies including HTML evolved beyond the original scope of "marking up text documents". That original design foundation is still there: marking the content structure of a document through HTML tags, though.

The problem is that developers want to cater to demands to build these nice fancy UI experiences that need to be rendered perfectly on various devices. And so, the original intent of HTML goes right out of the window. What's left is an unreadable mess of spaghetti HTML, mangled DOM's with non-sensical auto-generated CSS classes to which one needs compilers and transpilers and entire toolchains as you write your CSS in an entirely abstracted fashion.

When you're building a complex interactive application for the browser. That's just the current state of affairs one will have to accept. Presently, you're still, in essence, using tools that originally never were designed for that purpose.

However, if you're just going to build a simple blog or a site with static content, it pays dividends to think about the structure of your content, consider the semantics of your HTML and the CSS classes you're going to use. Using pure CSS, you could then easily write lean, performant and understandable stylesheets that don't need to be processed by complex toolchains. And you certainly wouldn't need complex frameworks to build a website.

Of course, YMMV, and so there's definitely a market for Tailwind and their ilk. I do think that developers should learn about "golden hammer" syndrome early in their career: while frameworks make your life as a developer easier, they aren't the best choice in all use cases.

From the perspective of a "body shopping" business, it makes sense to standardize the process as much as possible and fall back to a few well known tools and practices with repeatable - and therefore measurable - outcomes. In the same vain, the big trade off here is providing any form sanity/clarity when someone hits the "browse source" button in there browser.

Re: TailwindCSS v2.0

#139

The things I love the most about TailwindCSS: 1. After purged the CSS file is really, really small. 2. Hopping into all of my projects and not having to remember new class names. 3. Not having to come up with new class names. 4. Not worrying about making a change in a class and having unintended consequences. 5. Not skipping back and forth between HTML or CSS files. That said, if you don't dig it, there are plenty of…

> 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writing and updating attributes like this?! class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" How could you possibly manage this without components? Ctrl-F "lg:text-7xl" and replace?

You make components as usual, but you style with those utility classes. Those utility classes are configurable in one theme file where you can set what "text-4xl" is or how much space "mt-10" is.

Re: TailwindCSS v2.0

#140

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.

I used it for my site here: https://www.listenaddict.com/ I've also used it for other various sites in the past. Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.

If you were instead given a specifc design by a designer, would you be able to use Tailwind only or would there be custom CSS mixed in there to finess it to match the designs?
Post reply on HN