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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

391–400 of 448 posts

Re: Tailwind CSS v3.0

#391

Post by zomgwat »

aaronbrethorst wrote: post #277
14u2c wrote: post #269

Earlier quoted context omitted.

In the context of component based development, react etc., I believe what you describe is actually very beneficial. Think about a case where instead of doing something you write an atomic component which uses tailwind internally. With this workflow: * There are no global styles that can have an unknown or unexpected impact on the application when modified. * The component's style is completely encapsulated. It can be…

I use Tailwind utility classes extensively to create reusable components in a Rails app using GitHub's ViewComponent gem ( https://viewcomponent.org ) Occasionally, I'll use @apply directives to DRY up something that isn't easy to encapsulate at the component level, but 95% of the time, I can easily get by with utility classes. I try to avoid using hyperbolic-sounding language like 'revolutionized,' but Tailwind + Vi…

My experience with Tailwind + ViewComponent has been great as well. I've also had a lot of success with adding Sorbet typing to the view components. I often use Sorbet enums as view component options. The extra type safety in the view layer is very helpful.

Re: Tailwind CSS v3.0

#392

Post by hbn »

scubadude wrote: post #225
dcre wrote: post #80

Earlier quoted context omitted.

If you're talking about Tailwind UI[1] — I use Tailwind extensively and have basically never looked at Tailwind UI. It's just useful snippets of HTML styled with Tailwind. It is by no means required to get value out of Tailwind. I'm not sure what you mean by proprietary culture! Based on the fact that I've pretty much never seen anyone talk about it, I would guess (total guess, no real knowledge) that no more than 1%…

You have to do literally everything from scratch with Tailwind though, for example I never realised how much work is involved in a simple avatar dropdown / logout component (hidden full-screen button). Tailwind is much closer to raw CSS than Bootstrap. That's not a criticism, it's just a different value proposition.

That's a bit of an odd criticism. I wouldn't expect any library/framework to offer copy-paste-able usage of itself as a feature.

Tailwind is just a different way of writing CSS styles. Not a bunch of premade UI templates.

Re: Tailwind CSS v3.0

#393

Post by slantyyz »

docmars wrote: post #296
hiimshort wrote: post #284

I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects…

Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion, so you gain the benefits of quick component creation, but the same pleasant maintenance of colocating utilities and styles/classes/objects composed of these utilities with your components. It's been an absolute dream in a decent-sized project so far, and eve…

If you're using Svelte, you don't really need Tailwind (but are obviously free to use it), especially if you're using your own components.

Svelte's styling is already pretty atomic as it is.

With Svelte, I use a small global reset, and a global file containing native CSS variables (which I reuse across multiple projects).

Most of my Svelte CSS is component specific (and in most cases, no classes are even necessary) and they can be themed by simply referring to the CSS variables in my global variable file.

Re: Tailwind CSS v3.0

#394

Post by runarberg »

progx wrote: post #359
runarberg wrote: post #95

Earlier quoted context omitted.

There is a dead sibling comment which I will repeat with a bit kinder words, and with a different caveat. As a frontend developer I don’t like Tailwind for several reasons, it brings the styling into the structure. As a frontend developer Tailwind is at a forefront of what I would consider bad practice and encourages a code style which would be a nightmare for me to maintain. That said. Tailwind seems to be loved be…

As a frontend developer you should hear about components. Or did you develop websites not apps?

I do components all the time, and I usually do component scoped styles.

Re: Tailwind CSS v3.0

#395

Post by slantyyz »

freeopinion wrote: post #120
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…

I build tailwind exactly once and it gives me a static css file with utility classes. I get local scoping from scope classes ala Svelte.

With Svelte, I just maintain a small reset file and maintain a list of native CSS variables that I can use from my Svelte components.

I have not personally found the need to use Tailwind because of that.

Re: Tailwind CSS v3.0

#396

Post by seanwilson »

hbn wrote: post #390
734129837261 wrote: post #384

Earlier quoted context omitted.

The problems he's tackling weren't problems, and his solutions are a bombardment of utility class names in your HTML, rendering it extremely and unnecessarily verbose. It makes the HTML less intuitive to read, too. A ` ` is clearly a container for a user profile, a ` ` tells you absolutely nothing about what the hell is going on. I fucking LOVE CSS and Tailwind is an insult to the craft. Those who love Tailwind tend…

> A ` ` is clearly a container for a user profile, a ` ` tells you absolutely nothing about what the hell is going on. You know what's going on if you're in a component called user-profile.component.html How often are you writing something like a user profile component in the context of something much larger? Also, what styles would the class "user_profile" even have? You say the second one "tells you nothing about w…

As an example, I'd say this isn't semantic HTML:

    headingbob is a person
This is better:

    heading
bob is a person
This is less clean but has the same level of semantic detail in the HTML:

    headingbob is a person
Am I missing something?

I think people conflate semantic class names (read by programmers and maybe ad-hoc web scrapers) with semantic HTML (read by screen readers, SEO bots). Semantic HTML is HTML that uses the appropriate semantic HTML tags, but including wrapper divs and CSS class names on top of this doesn't make it less semantic to a machine.

For styling, when a utility class is all you need to style a particular tag and it's obvious from context what that tag is being used for, I don't see to reason to spend time trying to come up with a semantic name e.g. `home-hero-wrapper-inner`.

To me, this is people dogmatically sticking to a "best practice" without thinking about the pros/cons and reason behind it. This is also related to the pipedream that HTML is for data only with nothing about presentation and CSS should be able to style the HTML without you editing the HTML.

Re: Tailwind CSS v3.0

#397

Post by danielvaughn »

ereveles wrote: post #330
docmars wrote: post #298

Earlier quoted context omitted.

You can use both and gain the benefits of Tailwind-in-JS to dynamically apply utilities and arrays/objects of utilities composed together, all using a nifty wrapper library called "twin.macro". It sits on top of Styled Components or Emotion (your choice), and uses your project's Tailwind config faithfully, minus a few of the plugin features. It eliminates the need for JIT or PurgeCSS because it compiles Tailwind's ut…

+1, tried Tailwind and liked it, but when I found I was able to use CSS-in-JS with it with twin.macro i was amazed. Now is used on all my side projects.

Just checked it out, looks nice. What I'd really like is a more concise way to apply tw classes in jsx. Something like this:

Re: Tailwind CSS v3.0

#398

Post by hbn »

AltruisticGapHN wrote: post #367

I love Tailwind but now with these updates I'm like "ok whatever". Information overload. There is a point where there are so many utilities; it's just not reasonable to ask me to remember them... and at that point where I can't keep them in my mind, then the "framework" loses some of its appeal and benefits. Of course I suppose it's up to the user to decide what they want to remember, and it is the nature of the fram…

I have a subset of my more commonly-used classes memorized, and for everything else it has a fantastic docs site that I keep a tab of while working, which also got overhauled with v3.0

https://tailwindcss.com/docs

Cmd+K to search (it's also a pretty damn good, exhaustive search too)

Re: Tailwind CSS v3.0

#399

Post by hbn »

seanwilson wrote: post #396
hbn wrote: post #390

Earlier quoted context omitted.

> A ` ` is clearly a container for a user profile, a ` ` tells you absolutely nothing about what the hell is going on. You know what's going on if you're in a component called user-profile.component.html How often are you writing something like a user profile component in the context of something much larger? Also, what styles would the class "user_profile" even have? You say the second one "tells you nothing about w…

As an example, I'd say this isn't semantic HTML: heading bob is a person This is better: heading bob is a person This is less clean but has the same level of semantic detail in the HTML: heading bob is a person Am I missing something? I think people conflate semantic class names (read by programmers and maybe ad-hoc web scrapers) with semantic HTML (read by screen readers, SEO bots). Semantic HTML is HTML that uses t…

> This is also related to the pipedream that HTML is for data only with nothing about presentation and CSS should be able to style the HTML without you editing the HTML.

Which I also think is weird, because the hierarchy of HTML is inherently styling/presentation. If HTML was truly decoupled from styling, you'd just throw all the tags that you want into an HTML file and then arrange them around with CSS.

That's why when you're using child selectors in CSS (or the nesting in SCSS that's transpiled to child selectors), you're forced to keep two hierarchies in sync, which makes it a huge PITA to refactor.

Re: Tailwind CSS v3.0

#400

Post by lijogdfljk »

aniforprez wrote: post #316
lijogdfljk wrote: post #87

Earlier quoted context omitted.

Any thoughts as to how Tailwind can handle dynamic plugins using Tailwind? Ie it seems Tailwind relies on tree shaking to produce sanely sized CSS. But if you have plugins which rely on Tailwind, you'd have to either ship the full sized Tailwind CSS or they'd have to duplicate CSS and ship with it. So far with this plugin/extension design i've not found a way to use Tailwind and also retain nicely sized CSS.

> it seems Tailwind relies on tree shaking to produce sanely sized CSS This 3.0 release has its biggest feature be JIT. If you read the linked blog post, CSS is no longer purged but generated dynamically by reading your source files and generating the TW classes you use. It's not tree shooken anymore

Appreciate the info! I'll have to figure out how the hell this works though lol, i watched the video and am still a bit perplexed, since i'm not using JavaScript. I'll be curious to see how i can hook into it
Post reply on HN