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

431–440 of 474 posts

Re: TailwindCSS v2.0

#431

Post by pembrook »

rvense wrote: post #368
pembrook wrote: post #360

Earlier quoted context omitted.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

> It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. No, your designers should already be working to scales for size, colour etc. which you can implement in Tailwind. If they don't, now's a good time to start. > How the hell does that help with consistency? You have to copy paste that mess every time you create a new button You're extremely not supp…

> with your JavaScript component framework

If I’m using React components, tailwind makes even less sense.

I’ve already separated my button large out as a component, guess what happens in a mature design system? The system gets updated and changed to fit the needs of the product.

So what happens when you need to change button large in tailwind? You need to restyle the button with the spaghetti mess (maybe add something to the config), then re-extract the mess into a tailwind component. Now you’ve got components within components just to emulate the abilities CSS has right out of the box.

Guess what you could have done? Just had a .btn-lg class in an old school style sheet where you updated to the new font weight and padding and you’re done!

There is no need for this layer of complexity and abstraction of CSS. CSS is literally the easiest thing in the entire stack. Why do you want to make it so complicated?

Rube Goldberg machines are extremely elegant in their beauty, but they are not the most efficient way to get something done.

Re: TailwindCSS v2.0

#432

Post by pembrook »

ylyn wrote: post #361
pembrook wrote: post #360

Earlier quoted context omitted.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

You're meant to use it with some other mechanism for code reuse, say React components.

The point of react components is to centralize all instances of something for consistency and easy updates.

This is also what CSS does for you natively. Tailwind is a beautiful, elegant, and ultimately unnecessary layer of complication.

It feels powerful and fast to beginners, and then you go through a design system overhaul with it, and start wishing you had just used bootstrap style class names and avoided the whole mess.

Re: TailwindCSS v2.0

#433

Post by rvense »

pembrook wrote: post #431
rvense wrote: post #368

Earlier quoted context omitted.

> It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. No, your designers should already be working to scales for size, colour etc. which you can implement in Tailwind. If they don't, now's a good time to start. > How the hell does that help with consistency? You have to copy paste that mess every time you create a new button You're extremely not supp…

> with your JavaScript component framework If I’m using React components, tailwind makes even less sense. I’ve already separated my button large out as a component, guess what happens in a mature design system? The system gets updated and changed to fit the needs of the product. So what happens when you need to change button large in tailwind? You need to restyle the button with the spaghetti mess (maybe add somethin…

I'm guessing you haven't actually used it. It's a fantastic fit for React or similar frameworks. There's honestly nothing spaghetti messy or Goldbergian about it. It's just generating a stylesheet.

I absolutely do have a .btn class in my Tailwind projects, that's a given. For consistency, it's built from the utility classes that Tailwind provides, but buttons are kind of a pathological case in many ways, they're really not how you should evaluate a framework. When I put two buttons next to each other, I don't make a new class for one of the to get some spacing, I just slap a "ml-4" on one of them, and that matches all my other spacings.

But the real magic is when I'm building up my mid-level components, I don't have to try to come up with names or abstractions for the CSS, I just make things look and work right, and as I notice patterns I can break them out into semantic classes as needed. It's a great way to work and the results have been good for me.

In my mind, the real mess is a bunch of poorly named CSS classes that end up being specific to the place where they're used. Specificity battles, 40 character BEM selectors, mismatched margins sizes and randomized colour palettes. Setting up a Tailwind configuration is a very ergonomic way of turning your basic design system into CSS.

Re: TailwindCSS v2.0

#434

Post by htnsao »

alserio wrote: post #371
htnsao wrote: post #294

Earlier quoted context omitted.

Yes, still seeing that too. The tailwindcss homepage fully loads for a brief moment then shows a white screen with "An unexpected error has occurred." Using Firefox on an Android phone.

Same behavior in firefox 68 android, but not in the new firefox android (using 83 beta), where it works without problems

Yeah works now, thanks.

Re: TailwindCSS v2.0

#435

Post by ivanhoe »

rglullis wrote: post #261
darekkay wrote: post #252

Earlier quoted context omitted.

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…

> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…

> And yes, I understand that tailwind allows you to create types and @apply them.

After (a short) twitter discussion with Adam Wathan about this, my impression is that his idea is to basically never use @apply, and instead create micro-components to encapsulate your basic styles. So instead of you create a component modal, and then you can put all the utility classes in its html, and still be able to quickly change it if needed.

Re: TailwindCSS v2.0

#436

Post by rglullis »

ivanhoe wrote: post #435
rglullis wrote: post #261

Earlier quoted context omitted.

> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…

> And yes, I understand that tailwind allows you to create types and @apply them. After (a short) twitter discussion with Adam Wathan about this, my impression is that his idea is to basically never use @apply, and instead create micro-components to encapsulate your basic styles. So instead of you create a component modal, and then you can put all the utility classes in its html, and still be able to quickly change i…

That is interesting. But what do you/does him mean by "create a mini-component"? Are we talking about a React component, a Vue one, none of that?

Re: TailwindCSS v2.0

#438

Post by nelsonenzo »

nelsonenzo wrote: post #226

This is neat. I actually wrote my css similar to this 10 years ago, but was laughed at by "the smart devs". I'm glad to see I was right all along. Don't let imposter syndrome get you kids, it's a hell of waste of time.

Not sure why I am getting downvoted :/. Just wanted to complement the product and encourage others not to be down on themselves.

I'm going to go commit suicide now. Sorry for bothering any of you.

Re: TailwindCSS v2.0

#439

Post by roryokane »

rglullis wrote: post #436
ivanhoe wrote: post #435

Earlier quoted context omitted.

> And yes, I understand that tailwind allows you to create types and @apply them. After (a short) twitter discussion with Adam Wathan about this, my impression is that his idea is to basically never use @apply, and instead create micro-components to encapsulate your basic styles. So instead of you create a component modal, and then you can put all the utility classes in its html, and still be able to quickly change i…

That is interesting. But what do you/does him mean by "create a mini-component"? Are we talking about a React component, a Vue one, none of that?

They mean a normal component in React, Vue, Angular, or whatever other front-end technology you are already working with. I think they’re calling it a “micro-component” just to emphasize that there is no logic in the component beyond the templating.

Re: TailwindCSS v2.0

#440

Post by cosmotic »

gitgud wrote: post #311
cosmotic wrote: post #299

Earlier quoted context omitted.

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

If an element has a style attribute that sets the color, it will override every single CSS/Style-element style that also sets the color, unless the CSS/Style-element style also includes an !important.
Post reply on HN