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

271–280 of 474 posts

Re: TailwindCSS v2.0

#271

Post by nickjj »

Scarbutt wrote: post #253
nickjj wrote: post #243

Earlier quoted context omitted.

I think the biggest pull back / time sink with Tailwind isn't the CSS, it's the (lack of) JavaScript. With Bootstrap you have a bunch of common things handled for you out of the box (dropdowns, modals, tooltips and like 100 other things you can easily find on Google since the community is massive). You can just drop these widgets into your template and get going. Often with just 1 or 2 lines code if you're using Yarn…

For a react app all what that javascript from bootstrap does is get in the way

> For a react app all what that javascript from bootstrap does is get in the way

But don't you have the choice to not use Bootstrap's JS then, and instead use either premade React components that are vanilla JS or use React Bootstrap components if you wanted to?

I'll admit I haven't written any React code but if I Google for React Bootstrap components I find a ton of resources, even 1 to 1 ports like https://react-bootstrap.github.io/components/alerts/. I also see tons upon tons of vanilla JS React components, all ready to go where you can drop in CSS class names and you're done.

Someone not using React with Tailwind is left with basically having to implement everything on their own, or try to stitch together a bunch of libs that others have written with their own individual opinions and lack of standards. It's a much different world. It's a world where you can spend 10 hours trying to get a responsive drop down working instead of 10 seconds with Bootstrap.

Re: TailwindCSS v2.0

#272

Post by seancoleman »

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…

Several people have pointed out the redundancy, even hypocrisy, with `@apply` and compositional classes. I like to think of `@apply` and componentization as competing solutions. Just like "composition over inheritance" I believe in "componentization over @apply / composite classes".

Ideally, you don't have composite `.btn` classes. You simply have a `` component which encapsulates appropriate Tailwind CSS classes in the component (no external CSS, `@apply` required).

With this framing, `@apply` is the less preferred of 2 approaches. It's good, even necessary, in some situations, but generally you should seek ways to componentize vs. abstracting compositional classes.

Re: TailwindCSS v2.0

#273

Post by acemarke »

jfengel wrote: post #236
madeofpalk wrote: post #131

Earlier quoted context omitted.

> JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because The line React core team would say is that that what you're thinking of isnt "seperation of concerns" but rather "seperation of technologies". React/JSX is good because both the HTML and JS together is the view. It's the same concern. React seperates concerns much better because it so heavi…

Agreed. We got used to thinking of any Javascript as "business logic" rather than "presentation" because it's an imperative language, but React/JSX are tailored to using JS in a way that acts more like presentation. If you write it imperatively, it won't be idiomatic React, and sooner or later something will break. So it may help to think of JSX as using a functional subset of Javascript. It's not, and that veil gets…

Sagas are a great power tool, but most Redux apps don't need them. That's why we opted to include thunks out of the box as part of our official Redux Toolkit package:

https://blog.isquaredsoftware.com/2020/02/blogged-answers-wh...

(You can still customize the middleware when using RTK to set up your store, same as always, so if you want to use sagas you still can.)

That said, there's a lot of things thunks _can't_ do, and for those use cases it makes sense to use sagas or observables.

Re: TailwindCSS v2.0

#274

Post by bigbassroller »

__abc wrote: post #90
bigbassroller wrote: post #58

Earlier quoted context omitted.

I second this! I have gone full circle myself. From Dreamweaver (have to start somewhere), hand coding, Bootstrap classes and modifying them, then naturally started using utility classes. Finally made the switch to Tailwind (felt like cheating on a lover, because I loved Bootstrap so much). I then went full on utility classes and low and behold, discovered @apply with nested @screen media queries and went right back…

Please, tell me more :)

Here is an example off the top of my head, while on iphone:

.card { @apply flex flex-row shadow rounded-md p-4; @screen md { @apply flex-col p-6; } yada... yada... }

then in tailwind config, point the purge path to your html file(s) to purge.

End result is css file with no more and no less than what you need, and in the web inspector you see clean HTML markup and clean CSS declarations.

edit: typo

Re: TailwindCSS v2.0

#276

Post by Taig »

I'm quite interested in frontend technology and enjoy to take a look at announcements like these. But at the same time my knowledge about JavaScript is extremely limited. So just out of curiosity:

Why is the theme fontSize defined as

    xs: ['0.75rem', { lineHeight: '1rem' }]
rather than something like

    xs: { size: '0.75rem', lineHeight: '1rem' }

?

Re: TailwindCSS v2.0

#277

Post by JxLS-cpgbe0 »

_jjkk wrote: post #200
JxLS-cpgbe0 wrote: post #189

Earlier quoted context omitted.

but my Cards are design components, they don't have semantic classes. How is ctrl+f "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" better than changing .myCard__title{} ?

I guess it depends on the project, but I can't recall one time I've had to do a CTRL F like you've mentioned. Of course if you have a very simple page with just some cards, a couple page layouts, that is one thing. Probably can get by with just a myCard class that works everywhere on the site. But in most projects, as the number of custom components grows, nobody wants to go back and touch (break?) old CSS, so they e…

I was going to say the opposite. Search-and-replace would never work on a high-volume site with a lot of components. Replace ".font-bold" and you just affected anything that was bold across the entire site.

I could see a use for this in JSX though.

Re: TailwindCSS v2.0

#278

Post by acemarke »

kall wrote: post #239
cosmotic wrote: post #39

Tailwind smells like using a style attribute but with properties that are fewer characters. It's fully embracing what everyone said to avoid. What am I missing?

It does. Using inline style attributes is basically a good idea when using a component framework, except for missing features and questionable performance. Tailwind solves that. There is an influential presentation from, i think, someone on the react team that started the whole CSS-in-JS thing. It just advocated for using inline styles. I can‘t seem to find it. React and Vue have special handling of the inline style…

That was Christopher "vjeux" Chedeau's "CSS in JS" talk:

https://blog.vjeux.com/2014/javascript/react-css-in-js-natio...

Re: TailwindCSS v2.0

#279

Post by pensatoio »

antonio-ramadas wrote: post #163
adamwathan wrote: post #128

Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…

I don’t want to steal the focus from the achievement, but the landing page fails to open on Safari on iPad Air 2013.

Every example I see seems to work with Safari on a 2020 iPad Air, /shrug. Ya on an old version of iOS?

Re: TailwindCSS v2.0

#280

Post by markdown »

keithnz wrote: post #169
maciekmm wrote: post #159

Earlier quoted context omitted.

What I'm struggling with is consistency across pages, especially if you are not using a component framework. I'll often end up with 50 similar, but different looking buttons. On the other side when using a component framework, re-implementing all components when there are solutions already available (i.e. very similar in terms of look and feel Ant [1] or even Material-Ui [2]) sounds counter-productive. Didn't you stu…

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.

Post reply on HN