Exploring the Tailwind CSS v4.0 Beta with Sam Selikoff

[@soberstudy160]

For me the most important thing about tailwind is that it brings developers and designers closer and work together much better, specially when working in a code base that uses files were styles and logic are in the same file. I take my hat off for the tailwind team

[@faraonch]

After 15 years of frontend development, I can confidently say Tailwind CSS is the best innovation in years. The new version just nails it again. The whole approach just makes so. much. sense. Browsers should support Tailwind natively anyway. If newbies would understand how much tech debt Tailwind killed at once?!.

[@WalkthroughsNL]

In what way should browsers support tailwind? It's already outputting css, what more could you want?

[@iukys3889]

We should not have to import it and set it up, should work out of the box. (Kidding ofc)

[@osman3404]

its all the attention to the all smallest details Adam and hid tailwind team put in their work. its like they think about everything related to CSS, Browsers, design AND Dev Happiness

[@faraonch]

​@@WalkthroughsNL Tailwind is so straight forward and close to CSS that the default abstract classes based on a default config defined by the browser vendors could be supported natively. Example: style=display:flex" => class="flex" out of the box. E.g Can be applied via inspector on any website.

[@Voidstroyer]

The only way browsers would be able to support tailwind natively is if tailwind is built-in to the browser itself. Just like how browsers have their own styling for certain elements.

[@Loui3Hunna]

The new features and changes looks so good! Can't wait for the official release Thanks for all the work you guys do

[@LutherDePapier]

The craziest thing here is that since this is all CSS you could literally have it all pre-rendered on the server. These are exciting times.

[@leularia]

wow that sound good !

[@palyanytsia]

you guys are awesome at explaining, kudos!

[@marwen_dev]

V4 looks awesome, great work🎉

[@LutherDePapier]

Holy shit. CSS does start and exit animations now.

[@palyanytsia]

tailwind is just the best

[@yoJuicy]

Love the content. it really helps a lot! Appreciate you guys taking the time!

[@j.erlandsson]

Insane stuff! I was kinda iffy about not having the config file because I like having that JS based space for settings, but after seeing this video that has gone way out the window and across the field. Good job Tailwind team.

[@HeyNoah]

So sick! Dude, you guys gotta release that color playground! That's so neat!

[@MyGeorge1964]

About time too... Many thanks guys - awesome!

[@AvanaVana]

Looking good. Can’t wait to give this a spin. 48:58 this is amazing. I need this NOW. Wondering how this works with react mounting/unmounting tho PS: the word is “isometric”. “Isomorphic” (as in “isomorphism” from math & group theory) means a structure-preserving mapping.

[@codewithrex]

Looks great 👌can't wait to upgrade my projects to v4

[@mrrolandlawrence]

wow packed full of great information :)

[@jackn]

I had to research `transition-discrete` and both of your assumptions were kinda wrong. It just allows transitions to apply to "discrete" properties, like for example you used to not be able to transition between `display: block` and `display: none` but now with CSS `transition-behavior: allow-discrete` you can opt in to this feature. It has nothing to do with ending animations.

[@dealloc]

When using starting-style and allow-discrete is what he's are talking about. Using allow-discrete with starting-style allows enter and exit effects with overlay and display properties.

[@LutherDePapier]

EVEN THE HEIGHT. FOR REAL. WITH BUILT-IN INTERRUPTABILITY. This is insane.........

[@lukmauu]

It is pretty hard to hold myself to not updated, but the inset-shadow-* and inset-ring-* are and the colors are so good that it hurts.

[@RedVelocityTV]

Can't wait to start using this

[@blooperr]

I'm actually impressed of Sam's keyboard navigation skills. Would like to see more of it :] Does he have vim keybindings? How did he change the value of e.g `mt-8` to `mt-6`. It looks like he's using arrows like in devtools

[@julianjackson8756]

Would you still use the config if you're using the Standalone CLI without vite?

[@valtism]

This is so sick

[@keithnicholas]

Plays well at 1.75 / 2 playback :)

[@abujessica]

u should watch all of youtube videos at 1.5 minimum is this not the default yet

[@jitxhere]

@@abujessica I watch all at 2x and my friends were surprised when I told them. So may be not that default

[@abujessica]

@@jitxhere real ones document.querySelector("video").playbackRate=3

[@wolfphantom]

1:16:37 talking about all spacing values exist and don't need to be defined feels like a potentially bad decision. If you want to build a controllable design system, then providing as few possible options that follow that system feels like it would be cleaner. That was easily achievable in the config file by overriding the theme rather than extending it.

[@sharmojj]

you guys need to really get along more often

[@gustavofernandez8654]

🎉

[@RishiRathore-x2h]

48.00

[@mohamed1208]

Third bird

[@josh.manders]

2,369th!

[@AndreLuiz-li1bf]

Second :)

[@damaholic22]

First