←back to thread

Tailwind CSS v4.0 Beta 1

(tailwindcss.com)
159 points creativedg | 2 comments | 22 Nov 24 02:12 UTC | HN request time: 0s | source
Show context
kookamamie ◴[22 Nov 24 08:33 UTC] No.42212127[source]▶
Read some of the Getting Started documentation, for fun. First step:

> Installing with Vite

What the hell is Vite? Oh, it seems to be something you need to install via npm.

I cannot help but to ask - why do we require npm, or Vite, for something that looks like it should "help" with CSS?

Why is the webdev such a shitshow, that seems to get ever deeper into its own weird rabbit hole?

replies(13): >>42212149 #>>42212151 #>>42212155 #>>42212163 #>>42212304 #>>42212348 #>>42212380 #>>42212593 #>>42212640 #>>42212864 #>>42213311 #>>42214964 #>>42217238 #
simonsarris ◴[22 Nov 24 16:10 UTC] No.42214964[source]▶
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.

replies(2): >>42215493 #>>42215792 #
1. jamie_ca ◴[22 Nov 24 17:40 UTC] No.42215792[source]▶
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.
replies(1): >>42215959 #
2. c-hendricks ◴[22 Nov 24 17:58 UTC] No.42215959[source]▶
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.