Comment by simonsarris | Hacker News Reader

Comment by simonsarris | Hacker News Reader

Parent Full thread

To answer your question sincerely, Tailwind is a series of utility classes that make it easy to author CSS within HTML (pages or components). Back in the day we had many libraries to do this, the most popular was called Bootstrap. It looks like this: https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootst...

You'll notice that Bootstrap CSS includes every single utility class within Bootstrap. This is fine, but it could be a lot smaller - reducing page load times for clients and data transfer for servers - if the CSS included by a library was solely the CSS used by one's site, and no more. This is why we web developers use an npm/vite build step generally, even if our out is very plain static HTML/CSS.

"Well why can't I just use Tailwind like I do with bootstrap? I just want to play around with it and not have to learn all that build stuff."

You can: https://tailwindcss.com/docs/installation/play-cdn

You'll also notice, if you search for Bootstrap today, that it expects one is using npm and webpack, parcel, or vite.

> You'll notice that Bootstrap CSS includes every single utility class within Bootstrap. This is fine, but it could be a lot smaller

For perspective, a build process that removes unused tailwind classes can result in .css files of around 10kb. But a .css file with entire tailwind framework is about 2.5MiB.

> You'll also notice, if you search for Bootstrap today, that it expects one is using npm and webpack, parcel, or vite.

It doesn't? Most of my clients and websites I saw just use the bundle.

https://getbootstrap.com/docs/5.0/getting-started/introducti...

The docs don't expect any complicated tooling.

Also: When served from a CDN like your link above, popular CSS like Bootstrap had a decent chance of _already_ being in your browser's cache, so despite downloading more initially you'd come across sites using the same version that meant _no_ delay downloading CSS for it.

Isn't this outdated information? https://httptoolkit.com/blog/public-cdn-risks/

> Most importantly: cached content is no longer shared between domains. This is known as cache partitioning and has been the default in Chrome since October 2020 (v86), Firefox since January 2021 (v85), and Safari since 2013 (v6.1). That means if a visitor visits site A and site B, and both of them load https://public-cdn.example/my-script.js, the script will be loaded from scratch both times.

It was (and still is) never a good idea to hotlink to an external dependency.

Most developers know better than to hotlink to an image because it might one day return a completely different image (and potentially an unsavory one) yet they casually use external code dependencies.

It is also why the Dependabot(sp?) that has become so popular among devs makes me nervous. Something automatically updating your dependencies is a recipe for disaster.

Reply on news.ycombinator.com