Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind CSS v4.0 Beta 1

tailwindcss.com

Post reply on HN
Print view View original

101–110 of 135 posts

Re: Tailwind CSS v4.0 Beta 1

#101

Post by simonsarris »

kookamamie wrote: post #46

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?

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.

Re: Tailwind CSS v4.0 Beta 1

#102

Post by lucsky »

agos wrote: post #74
quantadev wrote: post #31

Earlier quoted context omitted.

Good rant! That's kind of what web-development seems like sometimes. Almost every part of the technology stack is there to fix some other part of the stack that never was ideal to begin with. TypeScript being the best example. It only exists because JavaScript sucks, and JavaScript only ever existed because in 1994ish some guy failed to get Java to run in the browser, and the only reason we're building apps in what w…

no, it's not a good rant. this is the billionth "web dev is too complicated!" rant that is present under every. single. thread. about any technology vaguely related to front end development.

I haven't yet reached the end of the comments, but I'm also fully expecting at least one "Electron is a cancer that is eating my computer and the reason why my wife left me".

Re: Tailwind CSS v4.0 Beta 1

#103

Post by hu3 »

simonsarris wrote: post #101
kookamamie wrote: post #46

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?

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…

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

Re: Tailwind CSS v4.0 Beta 1

#104

Post by emmacharp »

thiht wrote: post #99
emmacharp wrote: post #92

I invite (for fun and learning!) anyone here still thinking native CSS provides no efficient solution to the problems Tailwind may have solved 5 years ago to challenge me: Bring up any said problem and I'll give you an efficient, robust, fast, simple and maintainable way to solve it in pure, native CSS (maybe even with further advantages!). The time has come to embrace good ol' CSS again! Heheh.

I'm a new user of Tailwind, but there are 5 points where I believe Tailwind is wayyy more efficient than CSS: - layout: flex and grid are great solutions, Tailwind just makes them extremely easy to use. Flex and grid are barely unusable without first defining at least 4 or 5 helper classes, more likely a dozen. Tailwind just provides them and makes them easy to use. I never could remember the flex properties, I learn…

1. I don't think I understand why you think flex & grid are barely unusable... without a dozen classes..? Maybe an example would clarify this perception for me.

2. You barely need media queries anymore for responsive design. Auto-adapting flex or grid containers and the use of clamp() reduced 90% of my media query usage. I usually use like 1 to 4 media queries in project (for master layout and responsive nav, for example). And there's a nice side effect to this type of intrinsic design : layout and type is way easier to optimize for every viewport! Mobile first design is really easy to approach in this way.

3. You can apply a dark mode by only switching a theme file with design tokens inside. Way lighter, way easier to read, does not clutter your codebase.

4. As a corollary to the previous point, the defaults you are talking about can be CSS custom properties defined in a theme file as I think, Tailwind 4 will do. You could then use the exact same defaults in native CSS.

5. Simple rules about CSS usage, enforced by Stylelint for example, can prevent the vast majority (and maybe all!) of the cascading problems you mention. Here are some rules and a Stylelint config I posted in a reply below: https://ecss.info. I've got a good track record with teamwork and this config.

CSS solutions may be really easy to use when approached properly. I'm happy to follow up with examples and/or reply to subsequent questions and thoughts!

Re: Tailwind CSS v4.0 Beta 1

#105

Post by jamie_ca »

simonsarris wrote: post #101
kookamamie wrote: post #46

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?

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…

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.

Re: Tailwind CSS v4.0 Beta 1

#106

Post by c-hendricks »

jamie_ca wrote: post #105
simonsarris wrote: post #101

Earlier quoted context omitted.

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…

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.

Re: Tailwind CSS v4.0 Beta 1

#107

Post by quantadev »

agos wrote: post #74
quantadev wrote: post #31

Earlier quoted context omitted.

Good rant! That's kind of what web-development seems like sometimes. Almost every part of the technology stack is there to fix some other part of the stack that never was ideal to begin with. TypeScript being the best example. It only exists because JavaScript sucks, and JavaScript only ever existed because in 1994ish some guy failed to get Java to run in the browser, and the only reason we're building apps in what w…

no, it's not a good rant. this is the billionth "web dev is too complicated!" rant that is present under every. single. thread. about any technology vaguely related to front end development.

I just started HN a few months ago, so I haven't been around long enough to realize there's certain topics the HN aficionados have grown bored with. My apologies for the disruption.

Re: Tailwind CSS v4.0 Beta 1

#108

Post by EasyMark »

agos wrote: post #72
caustic wrote: post #65

Earlier quoted context omitted.

Is tailwind better than CSS modules, and if so then why?

they serve different purposes. CSS modules is a (great) mechanism for providing isolation, very useful in the context of today's component-oriented front end development. Tailwind provides some (quite good) building blocks for a design system, such as a palette, a sizing scale, values for shadows and rounded corners... and a vast set of classes to apply them. The set of classes covers basically every CSS feature, mak…

Maybe I should revisit this stuff. I’ve been fighting anything other than my own custom CSS classes for a while. It’s beginning to look at bit dated and I have no interest in rewriting them for the few sites that I support (family members and a couple of charities). I am no web guru and much prefer my hobby/day job of embedded stuff that you’ll never see on a GUI. I keep hearing great stuff about tailwind though.

Re: Tailwind CSS v4.0 Beta 1

#109

Post by dillonshook »

atsjie wrote: post #6

They are switching from sRGB to OKLCH. First time I heard of OKLCH tbh. Anyone know if that is part of a wider adoption trend or is Tailwind pioneering here? Looking at the examples it does seem to offer some advantages; but was primarily surprised that they now use it as a default.

In case you're wondering how to pronounce it...

https://dillonshook.com/how-do-you-pronounce-oklch/

Re: Tailwind CSS v4.0 Beta 1

#110

Post by quantadev »

phist_mcgee wrote: post #86
agos wrote: post #74

Earlier quoted context omitted.

no, it's not a good rant. this is the billionth "web dev is too complicated!" rant that is present under every. single. thread. about any technology vaguely related to front end development.

This site leans heavily backend it seems. There's a strain of patent smugness that comes with a lot of comments about frontend on this site and it's quite disheartening to see it. You rarely see frontend devs disparaging backend devs for their tech choices.

I think back-end development is a much more "comfortable" lifestyle (I'm full stack myself), even if lots of it is technically more difficult coding than front end (i.e. multiple threads, databases, load-balancing, etc), because there's a new front end technology that comes out every couple of years, making many of the front end tech stacks become obsolete rather fast and they're super fragmented in terms of large numbers of different and unique frameworks. Not to mention how plagued front end work was for so many years due browser incompatibility issues.

For example, on the back end in Java there's been just basically SpringBoot for a decade, and as long as you keep up with it's minor changes you're all set.

Post reply on HN