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

441–448 of 448 posts

Re: Tailwind CSS v3.0

#441

Post by runarberg »

iovrthoughtthis wrote: post #436
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…

do you prefer the structure in the styling or the styling in the structure? i prefer the later. with styling in structure if i make a change in one place, it effects the one thing i intended it to with structure in styling, if i change one thing, it may impact many other things, some of which i might not intend to and are sometimes unknowable at the time of the change

I usually do component scoped styles (e.g. shadow DOM, Vue’s SFC, React’s styled components, etc.) and the changes I do only affect the component where the changes occurred. So to answer your question, I like structure in styling, but with component scoped styles that structure can be pretty minimal.

If I change the structure I usually have to change the style anyway. And with component scoped styles, I know exactly where I need to do that (usually in the same file, or in a file referenced by the component).

As for shared styles I use the cascade which can penetrate the component boundaries, e.g. font-size, color, but usually --css-custom-properties.

Re: Tailwind CSS v3.0

#442

Post by staunch »

yurishimo wrote: post #422
staunch wrote: post #220

Earlier quoted context omitted.

It seems proprietary because there are ad links disguised as documentation links. You can't click "Components" anywhere on TailwindCSS.com or you'll end up on TailwindUI.com pricing page. It's fine that they want to make money but it's very confusing for a new user. Ultimately, they might make more money by dropping the shady links if it's turning away enough new users. s/Components/Tailwind UI/g across their site wo…

I can maybe see how that could potentially be confusing to a brand new visitor, but how is it shady? It's a clearly labeled link that does take you to components made with tailwind. Are they supposed to link to all the freeware out there first?

It's an ad designed not to look like an ad. It looks like internal site navigation but is an external link. Not a big deal but a bit shady/confusing.

Re: Tailwind CSS v3.0

#443

Post by yurishimo »

staunch wrote: post #442
yurishimo wrote: post #422

Earlier quoted context omitted.

I can maybe see how that could potentially be confusing to a brand new visitor, but how is it shady? It's a clearly labeled link that does take you to components made with tailwind. Are they supposed to link to all the freeware out there first?

It's an ad designed not to look like an ad. It looks like internal site navigation but is an external link. Not a big deal but a bit shady/confusing.

Gotcha. Yeah, phrased like that, I can see your perspective better (and I even agree!). Maybe a little external site icon and moving that link to the end of the nav could clear that up.

Re: Tailwind CSS v3.0

#444

Post by docmars »

docmars wrote: post #305
montroser wrote: post #234

Earlier quoted context omitted.

Yes, or now with Tailwind v3.0 you can write that as ... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...

This seems silly, but even this has benefits over online styles: it generates a scoped classname that wouldn't interfere with others, and you can use this syntax with JS conditionals to dynamically apply CSS with values interpolated if you need. Not much different than injecting an object in a `style` attribute in practice, but there's a lot of creative firepower in the arbitrary styles API.

Too late to edit, but not "online" styles—but "inline" xD

Re: Tailwind CSS v3.0

#445

Post by docmars »

emptysea wrote: post #439
ereveles wrote: post #330

Earlier quoted context omitted.

+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.

I'm curious how that would work with typescript since it's adding extra props like `css` and `tw` to components which don't exist in the types

It's Typescript-friendly, and if you use the Twin Intellisense extension for VSCode, it will autocomplete from all of the generated utilities in Tailwind, even the ones created from your own configuration of colors, spacing, etc.

Twin Macro has a few snippets of type definitions you can add to your project based on whether you're using Styled Components or Emotion, specifically to support these two props (tw and css).

They link to their Examples repo from the official readme with several projects using many different combos, with a handful of TypeScript ones.

Re: Tailwind CSS v3.0

#446

Post by docmars »

slantyyz wrote: post #393
docmars wrote: post #296

Earlier quoted context omitted.

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) a…

Nice! This reminds me of Pollen:

https://www.pollen.style/

Re: Tailwind CSS v3.0

#447

Post by slantyyz »

docmars wrote: post #446
slantyyz wrote: post #393

Earlier quoted context omitted.

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) a…

Nice! This reminds me of Pollen: https://www.pollen.style/

Yes, it's very similar to that. I looked at Pollen a while back to see if there were any ideas I missed, but while Pollen has a different approach to variable naming, it was very similar to what I do.

Re: Tailwind CSS v3.0

#448

Post by winstonewert »

aniforprez wrote: post #371
winstonewert wrote: post #317

Earlier quoted context omitted.

For me, the situation is: I gave tailwind a try. I hated it. I spent a lot of effort of ripping every last tailwind class out of my project. And yet, a lot of people swear by it and think its great. This really confuses me, and I'd kind of like to understand: how can other people like this thing that I think is terrible?

> how can other people like this thing that I think is terrible Cause it works for them? You cannot be the arbiter of what other people like or don't I hate CSS and I find the TW classes being right there with the HTML more helpful than class-hunting through a bunch of CSS files. React solves that somewhat with styled components now. I like having design guidelines set loosely about things rather than writing reams o…

Well, obviously it works for them and they like it, I just don't understand why.

I'll agree with having the styling information with the HTML. But there are lots of ways of doing that such as svelte-style components, CSS-in-JS, or inline css. Tailwind really didn't seem to have useful design guidelines to me. Since the classes seem to mostly correspond 1:1 with css properties, I didn't seem to be saving writing styling information. The media queries are something you can't do in inline css, but you can do it with css-in-js or svelte components.

Post reply on HN