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

311–320 of 474 posts

Re: TailwindCSS v2.0

#311

Post by gitgud »

cosmotic wrote: post #299
Kiro wrote: post #83

Earlier quoted context omitted.

What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Since I can't I use Tailwind where that's possible.

Style attributes have very high specificity so they basically preclude using normal CSS files (they would mandate every line include !important)

This is misleading, !important is not required to use inline styles.

They still cascade normally like CSS classes... see this example:

    
      
red text

      
red text

      blue text
Ironically, it's actually complex CSS classes and long selectors that produce high specificity, which then requires even more specificity to override and eventually the dreaded !important

Re: TailwindCSS v2.0

#312

Post by dsissitka »

markdown wrote: post #280
keithnz wrote: post #169

Earlier quoted context omitted.

you can make common styles for things like buttons, if you watch adams tutorials videos, they cover this reasonably early on

> adams tutorials videos They're all gone. Vanished completely from the website. And I was half-way through!!! Now they link to somebody's youtube channel for random Tailwind stuff rather than the nice walkthrough/tutorial that were the originals.

Is this what you're looking for?

https://v1.tailwindcss.com/course/setting-up-tailwind-and-po...

There's a version selector in the upper right corner.

Re: TailwindCSS v2.0

#313

Post by keithnz »

markdown wrote: post #280
keithnz wrote: post #169

Earlier quoted context omitted.

you can make common styles for things like buttons, if you watch adams tutorials videos, they cover this reasonably early on

> adams tutorials videos They're all gone. Vanished completely from the website. And I was half-way through!!! Now they link to somebody's youtube channel for random Tailwind stuff rather than the nice walkthrough/tutorial that were the originals.

seem to be all there :-

https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21t...

Re: TailwindCSS v2.0

#314

Post by gitgud »

shripadk wrote: post #96
Kiro wrote: post #83

Earlier quoted context omitted.

What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Since I can't I use Tailwind where that's possible.

> What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Imagine styling a table row. That is one style attribute. Now imagine styling a 100 tables rows. That is style attribute duplicated a 100 times. Think of the amount of unnecessary bandwidth consumed to load that HTML file with 100 duplicate style attributes. Not only does it s…

That's a good point, but tailwind is primarily suited for component based architectures.

So in this situation you would have a component, which would contain the tailwind classes. This reduces load time as duplication is eliminated, but I'm not sure it would reduce the render time.

Re: TailwindCSS v2.0

#315

Post by fareesh »

darekkay wrote: post #263
fareesh wrote: post #197

Earlier quoted context omitted.

Can you help me understand the architecture a bit better? I have some reservations. If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB) Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve th…

> If you extract components then you require JS Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.

Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering

Re: TailwindCSS v2.0

#317

Post by JxLS-cpgbe0 »

cactus2093 wrote: post #310
JxLS-cpgbe0 wrote: post #115

Earlier quoted context omitted.

> 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?

Lots of good responses already on other ways to abstract, but I'll even go one further and say "sure, why not?" When are you changing every single instance of "lg:text-7xl"? More often you're probably making a change in one single place in the app, in which case this is incredibly easy, you just make your change where you want. You're not slowed down by digging through layers of abstraction cruft and indirection unti…

> When are you changing every single instance of "lg:text-7xl"

I'm not, I'm changing some 7xl-sized text in multiple places. But I don't want to change every element that is .lg:text-7xl already.

> If you're doing an entire site design refresh

I'm not

> You will inevitably have some layer of abstraction anyway, something like components

I already do, they're in JS, and much more powerful and extensible than HTML attributes.

Re: TailwindCSS v2.0

#318

Post by balfirevic »

rglullis wrote: post #237
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…

I am definitely missing something. What I don't get: if tailwind provides all the preprocessor parts, why do people need to put the class definitions as part of the HTML? I would completely get behind tailwind if it was only the SASS part. Give me a bunch of mixins and consistent variable naming, which I could just `@import` into a sass file where I get the definitions for UI elements, widgets, etc... the whole "Desi…

> All of that can (and should if you actually paid attention at the CSS Zen Garden) stay outside of the HTML.

Yes, I've paid lot of attention to CSS Zen Garden. No, I don't think it should stay out of HTML.

You don't have to like it, it doesn't have to fit the way you like to work. But don't try to paint it as if people who prefer having utility classes inside HTML are just somehow not familiar with idea that they should be kept out. That's been the default view for the past 15-20 years, you know?

Re: TailwindCSS v2.0

#319

Post by pembrook »

arawde wrote: post #308
pembrook wrote: post #238

Earlier quoted context omitted.

> You probably haven't actually delved into Tailwind on a non-trivial project. This is precisely where Tailwind breaks down IMO. It's fast for landing pages and smaller sites--but when implementing a real design system across a complex web app, Tailwind is a nightmare. We've had to add so much custom stuff to the config file it's basically the same mess our CSS was before. I've been-there-done-that with the whole CSS…

For the minimal CSS framework, I've been a fan of Tachyons on past projects https://tachyons.io/

I did like how you can use Tachyons as a raw stylesheet without complicating your build process.

However, tachyons is even worse than Tailwind in that it offers far too few classes for margins, padding, widths, etc. so you end up having to build everything custom anyways.

And you can't just "try" one of these frameworks once or twice, you have to memorize their particular syntax or you lose all of the benefits of using them. After spending hours learning tachyons syntax and googling about 17,000 times, I had forgotten the tailwind way. And when I went back to tailwind I had to google every time I wanted to add a style again.

Ultimately, CSS frameworks don't save you time unless you pick 1, customize it to your needs, and do front-end stuff full-time so you don't forget the syntax.

Re: TailwindCSS v2.0

#320

Post by thegreatpeter »

pembrook wrote: post #238
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…

> You probably haven't actually delved into Tailwind on a non-trivial project. This is precisely where Tailwind breaks down IMO. It's fast for landing pages and smaller sites--but when implementing a real design system across a complex web app, Tailwind is a nightmare. We've had to add so much custom stuff to the config file it's basically the same mess our CSS was before. I've been-there-done-that with the whole CSS…

We have two design systems at Draftbit that utilize tailwind and it’s great.

We use what they give us, it works.

Post reply on HN