4 ms·

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

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/bootstrap.min.css 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 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.

hu3 2y ago
> 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/introduction/#bundle https://getbootstrap.com/docs/5.0/getting-started/introducti... The docs don't expect any complicated tooling.
jamie_ca 2y ago
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.
- c-hendricks 2y ago
  Isn't this outdated information? https://httptoolkit.com/blog/public-cdn-risks/ 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 https://public-cdn.example/my-script.js, the script will be loaded from scratch both times.
  - PortSaturation 2y ago
    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.
isleyaardvark 2y ago
> 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.

hu3 2y ago

> 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/introduction/#bundle https://getbootstrap.com/docs/5.0/getting-started/introducti... The docs don't expect any complicated tooling.

jamie_ca 2y ago

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.

c-hendricks 2y ago
Isn't this outdated information? https://httptoolkit.com/blog/public-cdn-risks/ 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 https://public-cdn.example/my-script.js, the script will be loaded from scratch both times.
- PortSaturation 2y ago
  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.

isleyaardvark 2y ago

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