The New TailwindCSS Looks Promising

A few days ago, tailwindcss released their 4.0 preview. It's already available to play around with, so let's see what changed and how it tries to be better than previous versions.
-- sources
v4 announcement: tailwindcss.com/blog/tailwind...
-- my links
saas: www.animate-code.com/
newletter: www.joshtriedcoding.com/
discord: / discord
github: github.com/joschan21

[@BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's css framework.

[@Shura-yd4jq]

Look at that subtle off-white coloring. The tasteful thickness of the font. Oh my god! It even has hover effects.

[@regexPattern]

To be fair, those 53MB that the engine weights, are mostly from the oxide/creates/core/benches folder, which is a bunch of HTML files that weight around 52MB when added up. That means that the engine itself weights around 1MB (worth of source files).

[@rainstorm4161]

If Tailwind CSS had a feature that allowed you to combine multiple utility classes into a single, compact syntax inside the class attribute, like this: lg:[bg-red-100 text-black] instead of lg:bg-red-100 lg:text-black, it would be awesome.

[@mkvetny]

that's not really possible without framework integration with something like webpack, which adds a lot of complexity

[@rainstorm4161]

@@mkvetny I understand complexity is a concern. However, if Tailwind offered a way to combine utilities, the potential benefits like cleaner HTML and easier maintenance could outweigh the added setup. Perhaps a future version could find a balance between simplicity and this kind of functionality.

[@mkvetny]

@@rainstorm4161 if that's what you want you should take a look at unoCSS

[@faraonch]

Fantastic and nice summary. Comes at the right time while I started implementing a theming concept in a bigger corporate project.

[@rayusaki88]

Definitely a step in the right direction! Thanks for sharing your thoughts Josh!

[@ernst367]

Hmm...some great changes coming here. Thanks Josh

[@jeresalem]

In development Lightning CSS typically runs on every change, not just once, so being fast there is great.

[@inderjotsingh5868]

Runs to do what ?

[@XTANCE]

@@inderjotsingh5868 to run of course.

[@adrian34234]

Globals.css appealed to me the most, as well as the quick configuration, but we will see in what direction it will ultimately go, thanks josh for another concrete episode without too much prolongation

[@HarshalHirve555]

Thank you for all your videos. They help us a lot in understanding what's going in the IT space. A request, can you please make few videos on how to make Micro Frontends using React & Next.js in 2024 ( I mean CSR MFs & SSR MFs)

[@mohitcodeswell]

Slow? -> Rust -> 💥 Fast!!! -> Oh build time 💀

[@rjwhite4424]

how is this going to effect NextUI. I really like that library. It's like MUI meets Tailwind

[@mikelCold]

Build speed is important for iteration time, especially as development time increases (AI code). It is weird how the rust world is overshadowing the ts/js world. Why are the node/typescript people not making their compilers super fast so we don't need to use another tool?

[@internetexplorer7880]

Noticed you didn't get autocompletion for your custom color, will that be the new way of doing things?

[@ivangechev4243]

When you said v4 I thought about v-for in Vue :D

[@helleye311]

Skipping tailwind.config will be huge. That was my main issue with shadcn so far (obviously I still used it cuz it's just so darn good, but making a full custom theme was a no go for me) I don't really care about build time, but I mean, not gonna complain either. Good stuff. Now the only thing I want is making a , declaring the colors with concrete types or some other way like that. And then do className={`bg-${colorScheme}-300 border-${colorScheme}-500`} CVA made it a lot easier to do full color schemes like this, but you still need to manually type out the classes so tailwind knows they're used and should be included in the bundle. Or manually include them in the config file. If that ever gets done I'll never even look at another styling framework again.

[@RhythmRift74]

hmmm so there is no more tailwind config file ?

[@bcb3548]

Looks pretty impressive! Great round up.

[@GamerSharp]

good changes

[@ShoterOTP]

Glad I haven't switched to StyleX when they hyped it up.

[@Jackson_Zheng]

Looks neat...but hate having to migrate in just a few months.

[@koltuz]

ok, i like this

[@mattd5419]

I'm migrating to v4 only when shadcn will

[@abakah]

Did I hear you say chief 😂

[@sammaxjorden]

Ok

[@naranyala_dev]

tanstack, tanstack, tanstack

[@TheOnlyJura]

new tailwind looks promising? does that mean the previous version was absolute trash? you really are just a masked junior

[@danko95bgd]

yes it was trash just like the current one and every next one they release

[@Houseofstartup]

hmm nothing big....

[@coolemur976]

But does it give you pleasure?

[@Houseofstartup]

@@coolemur976 nope

[@coolemur976]

@@Houseofstartup That's what she said

[@rayyanabdulwajid7681]

In tailwind, we are basically writing vanilla css. Therefore it absolutely sucks. Vanilla css is mich better

[@unforgettable31]

Tell me you don't use tailwind before telling me you don't use it.