Tailwind CSS v3.0 • Hacker News Board

Re: Tailwind CSS v3.0

#131

Post by psygn » Thu, Dec 09, 2021, 8:55 PM UTC

marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

I hear you. I don't understand the reasoning behind frameworks propensity to abbreviate things, especially at "atomic"/utility levels. I think it partially stems from wanting to prevent ignorant knee-jerk reactions like "hurr durr why not just write inline styles".

I wish framework devs would just hyphenate (or even colon-ize) the CSS property names fully like "display-flex justify-content-start". I think Bootstrap does their own pattern like "d-flex", but all that does is require one to visit the docs to view some less common properties. Autocompletion pretty much makes typing these a breeze, and having less opinionated patterns for property names will make it less painful transitioning between frameworks.

Re: Tailwind CSS v3.0

#132

Post by ksubedi » Thu, Dec 09, 2021, 8:55 PM UTC

stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

Seems like you are basing your opinions on some misconceptions. Let me try to clear that for you.

"CSS modules still seem to solve every problem Tailwind solves, and better."

- Not necessarily true. Unlike css modules, tailwind removes the whole "think about a name for your class" mindset, reducing friction from the development process. It also unifies some base level design decisions like spacing and colors, which developers would have to rely on "best practices" otherwise, which don't necessarily get strictly enforced.

"I'm not sure how Tailwind works, but any CSS that's built at runtime and JS and inserted into the DOM dynamically should be avoided, and is an example of favoring developer experience over end user experience."

- You are right, looks like you are not sure how Tailwind works. Tailwind does not build anything at runtime, it all happens at build time. Tailwind will compile only the things you need (using the new JIT mode) into a css stylesheet which is sent to the frontend. Not much different from how sass or scss works.

"CSS modules let you use the full power and control of vanilla CSS, without having to worry about styles bleeding across components."

- Tailwind does not stop you from using vanilla css, but in most cases you do not need to. As per their website, you can think of it as an API to use parts of CSS, instead of CSS replacement. I think you are confusing Tailwind as a replacement for something like CSS Modules, but those two are completely unrelated. You can still use CSS Modules while using Tailwind. Think of it as an api to your design sytem just like you could think of an ORM as an API to your database.

Re: Tailwind CSS v3.0

#133

Post by aidos » Thu, Dec 09, 2021, 8:56 PM UTC

nightpool wrote: post #122

dcre wrote: post #114

Earlier quoted context omitted.

Absolutely. But that's not a downside, that's exactly what I want.

Then why not just type that, instead of having to learn a completely separate set of concepts to map to the underlying CSS properties & values? I program with inline CSS styles all the time when I'm prototyping something or building a page quickly.

Because inline styles aren’t flexible enough to be used for everything, so you need to go out to external css eventually.

With tailwind you can do “block md:flex hover:font-bold” and you’ve covered pseudo class cases and media queries very succinctly.

Re: Tailwind CSS v3.0

#134

Post by Tade0 » Thu, Dec 09, 2021, 8:57 PM UTC

tlamponi wrote: post #98

dcre wrote: post #88

Earlier quoted context omitted.

The difference is you type that lingo inline into the HTML instead of in separate files and you don't have to come up with any class names.

Sounds a bit like a glorified ... ?

Essentially.

https://mobile.twitter.com/samthor/status/140282566806113075...

Re: Tailwind CSS v3.0

#135

Post by hipertracker » Thu, Dec 09, 2021, 8:57 PM UTC

keewee7 wrote: post #56

The thing that made Bootstrap click for me years ago as a backend developer were these complete example layouts: https://getbootstrap.com/docs/5.1/examples/ Is there anything similar for Tailwind CSS?

Check

https://daisyui.com/

https://windicss.org/

Re: Tailwind CSS v3.0

#136

Post by psygn » Thu, Dec 09, 2021, 8:58 PM UTC

nightpool wrote: post #122

dcre wrote: post #114

Earlier quoted context omitted.

Absolutely. But that's not a downside, that's exactly what I want.

Then why not just type that, instead of having to learn a completely separate set of concepts to map to the underlying CSS properties & values? I program with inline CSS styles all the time when I'm prototyping something or building a page quickly.

See https://news.ycombinator.com/item?id=29502652

Re: Tailwind CSS v3.0

#137

Post by seanwilson » Thu, Dec 09, 2021, 8:58 PM UTC

jolux wrote: post #129

seanwilson wrote: post #121

Earlier quoted context omitted.

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

I believe there are accessibility problems with using divs and spans where a more semantic element would suffice.

Yes, you should always be using the elements/tags with the most semantic meaning you can. When you need to add divs, spans and classes for styling reasons though, they're going to be ignored by screen readers so there's no problem here.

Re: Tailwind CSS v3.0

#138

Post by [deleted] » Thu, Dec 09, 2021, 8:59 PM UTC

weakwire wrote: post #55

skellera wrote: post #42

Earlier quoted context omitted.

When did playful become offensive?

Because by definition offensive has to do with how people receive something. I love the library, will continue using and donate, I would prefer the docs not to assume that people that print papers are animals. That's all! Take it or leave it.

[deleted]

Re: Tailwind CSS v3.0

#139

Post by [deleted] » Thu, Dec 09, 2021, 9:01 PM UTC

moritzwarhier wrote: post #110

tlamponi wrote: post #98

Earlier quoted context omitted.

Sounds a bit like a glorified ... ?

The differences are: * media queries * @apply * low specificity (tailwind doesn't do !important) EDIT: It "does" important, but only when instructed so, in 1.x it was a global switch, apparently since 2.x its available as a per-class modifier. Thanks dcre * the theming abstraction * brevity

[deleted]

Re: Tailwind CSS v3.0

#140

Post by dcre » Thu, Dec 09, 2021, 9:01 PM UTC

aidos wrote: post #124

dcre wrote: post #115

Earlier quoted context omitted.

Tailwind does have important, it was added with JIT. https://tailwindcss.com/docs/just-in-time-mode#built-in-impo...

Oh, nice, I think that’s a new 3.0 thing, not a JIT thing.

Looks like TW 2.2 from June. It wasn't in the initial JIT release in 2.1.

https://github.com/tailwindlabs/tailwindcss/releases/tag/v2....