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

TailwindCSS v2.0

blog.tailwindcss.com

Post reply on HN
Print view View original

201–210 of 474 posts

Re: TailwindCSS v2.0

#201

Post by withinrafael »

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on.

In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that does not exist. To adopt a shiny new browser, agencies would need to push browser updates to all their client machines every ~4-6 weeks [2]. Solution providers need to perform continuous testing on their web apps (browser vendors do not guarantee minor updates are backwards compatible), creating patches, which need to be submitted to the government for regression testing... and oops that took too long and the next EOL is here.

With Microsoft's surprise obsolescence of Internet Explorer 11 across all its cloud offerings 1Q 2021, we're headed straight into a brick wall. Very interested to see what shakes out here.

I suspect initially we'll see the government just deploy and use older unsupported copies of Chrome/Edge browser, under the guise of "well it's better than IE11 right?". Longer term, ...?

[1] https://blog.tailwindcss.com/tailwindcss-v2#incompatibility-...

[2] Vendors do not support these versions after EOL for any reason. Firefox has an ESR branch, bless them, but some agencies have now increased scrutiny of Mozilla software for recent political/security reasons.

Re: TailwindCSS v2.0

#202

Post by Wump »

For anyone who's interested, I put together a repos to bootstrap a react with typescript and tailwind project.

It's intentionally fairly barebones, but I've found it useful to get a wide variety of projects started quickly: https://github.com/figelwump/react-typescript-tailwind-boots...

I've come to love Tailwind, after a few failed attempts at using it. Recommend trying it!

Re: TailwindCSS v2.0

#203

Post by zdragnar »

tomhallett wrote: post #186
fishtoaster wrote: post #147

Earlier quoted context omitted.

I was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now. The only serious issue I had was when implementing designs provided by an outside designer: 1. The design says this width needs to be 28 px 2. That'd be "w-7", wh…

Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…

You lead a charmed life, my friend.

Many designers I have known think of consistency in terms of branding (at most). There is almost always some weird edge case that means a new font size, or unique spacing. Get enough of those, and the design system falls apart.

Some are better than others at this, obviously, but the mix has not really been in consistency's favor (though I will admit it has been improving the past few years).

Re: TailwindCSS v2.0

#204

Post by _jjkk »

wolco2 wrote: post #193
_jjkk wrote: post #164

Earlier quoted context omitted.

Layout tends to be a property of a particular component, and semantic classes don't work well there either. In a complicated codebase with multiple devs, the number of times you could confidently make a "one-place-CSS-change" to a semantic layout class is very small. It's likely that in one place or another, some dev made an assumption about your `sub-container` class or whatever, which causes your change to break th…

Instead of repeating "d-flex justify-content-center..." everywhere is it possible to define that once and inherit those properties in Tailwind?

Definitely, you can still add custom classes where it is the best solution, such as a reusable layout.

EDIT: Instead of custom CSS classes, Tailwind recommends extracting components like the other commenter pointed out. https://tailwindcss.com/docs/extracting-components

Re: TailwindCSS v2.0

#205

Post by mintone »

maciekmm wrote: post #159
seancoleman wrote: post #89

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…

What I'm struggling with is consistency across pages, especially if you are not using a component framework. I'll often end up with 50 similar, but different looking buttons. On the other side when using a component framework, re-implementing all components when there are solutions already available (i.e. very similar in terms of look and feel Ant [1] or even Material-Ui [2]) sounds counter-productive. Didn't you stu…

If you're not using components (react/vue etc.) then you can use @apply - I think the secret with that is to blend inline tailwind and the applied style so you might say..

.button { @apply rounded-md bg-gray-600 hover:bg-gray-300 text-white; } and then inline you might use class="button px-2 py-4" or similar to create specific styles. Of course these could be abstracted again to .big-button .small-button etc.

Tailwind has changed not only how I write CSS but how I think about writing front-end code completely - it's really great once it clicks.

Re: TailwindCSS v2.0

#206

Post by pikseladam »

adamwathan wrote: post #128

Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…

tailwindcss is like the fresh air that finally comes after trying bootstrap, flatui, kubecss for years. Thank you.

Re: TailwindCSS v2.0

#207

Post by steve_adams_86 »

adamwathan wrote: post #128

Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…

Beautiful, beautiful work

Re: TailwindCSS v2.0

#208

Post by propelol »

misiti3780 wrote: post #56

Has anyone created a react library that is well maintained with the tailwind framework?

I know the Tailwind guys are working on a project called Headless UI[1]. It's a component library without the styling. There is also Tailwind UI[2], which is more like Bootstrap. Both are official Tailwind projects.

1. https://blog.tailwindcss.com/headless-ui-unstyled-accessible...

2. https://tailwindui.com/components

Re: TailwindCSS v2.0

#209

Post by jarek83 »

kolektiv wrote: post #126

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…

I'm on the same boat. No one here really tells how to avoid the ease of getting tens of classes added across many tags. Tailwind requires a lot of self-discipline and that is very easy to omit in some projects. I can't imagine maintaining a project with tailwind on board.

Re: TailwindCSS v2.0

#210

Post by SebastianKra »

jaredcwhite wrote: post #123

This isn't how you HTML, people! https://threadreaderapp.com/thread/1329156451416244224.html I don’t have too many programming hills to die on, but taking full advantage of the glory that is HTML5 is one of them. Tailwind is…the opposite of that!

(I have little experience with Tailwind, but I can still make the following argument)

I think you're making a mistake in assuming that the example shows how you should actually use Tailwind in a project.

The creator himself has said that Tailwind should be combined with whatever component-system your framework provides. That's how you can get your semantic tags.

...and it's also how you should write Websites anyways - this has little to do with Tailwind. Tailwind can be seen as just a more powerful way of writing inline styles.

If you rely on CSS for reusable components, you may be in for a bad time as soon as you need to make even a tiny change in your design.

Post reply on HN