Tailwind 4

Welcome to Syntex.

On this Monday episode, we're gonna be talking about Tailwind four.

This thing just dropped, so we're gonna be talking all about what's new, what's changed, why you should care about Tailwind four. But let me tell you what you should also care about, century.io.

It's the perfect place to really ship excellent applications because, let me tell you, there's so many tools within Century for finding either bugs, issues, slowdowns, all that stuff with your site. And there's no better place to do it than Century because through Sentry's UI, you can quickly solve bugs. And there's some really awesome fix it for me AI tools that are coming to Sentry as well. So check it out at century.i0/syntax.

Sign up and get two months for free.

Use the coupon code tasty treat to get those two months, by the way.

Sweet. Wes. Sweet indeed.

Speaking of sweet, let's talk about Tailwind four because this thing just dropped, and there's a number of improvements, quality of life changes.

And a lot of these things are are definitely things that I personally am excited to see arrive.

So I guess maybe, like, the big picture view of this is that Tailwind four has a smaller ESLint, it has faster build times, and it has more modern CSS features. And there's some there's some other little things here and there too, but big picture,

that's it. Yeah. I think people who are using Tailwind, they're gonna be excited about different things.

A bunch of people listening are gonna be really excited that the modern CSS has been added. Yes. So things like, CSS layers, container queries, color mix, popover, all of these, like, new CSS things that we've been talking about over the last year or year and a half on this podcast are mostly now available ESLint Tailwind via the ways that they have implemented them. And then other people are gonna be be excited about, like, the the performance improvements. Right? You have a massive application that has, I don't know, 20,000 JSX files, and and you need to scan all of those files to figure out which classes are in there. And, if they're dynamic or computed classes, you gotta be able to to figure all that out. So that improvement is gonna be exciting for a lot of people. And then other people are just gonna be excited about a lot of the new, like, syntax upgrades. You know? Just easier ways to to approach, writing, tail, and things that maybe were a little bit of a struggle previously are now much nicer. So let's get on into it. The first thing we have here is the new config file. Wes, before we do get on into it, what is your

favorite edition here?

So I've been using it for about six months now, and I've been, like, on all the betas and kinda moving up on through it. And the pieces that I have liked the most are the first class support for CSS variables.

Mhmm. Because what I was doing previously is if you set a variable in tailwind three, you set it in, like, a JavaScript file, and then that exposed it via, like, a tailwind variable.

And then, like, I also needed those variables available via, like, regular CSS custom properties because I was using them in, like, calculation, relative color.

I was using them in color mix. I was using them on inline styles. I was passing them to, JavaScript functions. Jeez. Yeah. And I had to, like, write this, like, little layer that would essentially just loop over all of my tailwind variables and then stick them on the root of the document as, like, regular CSS custom properties. And that's no longer needed with with tailwind four because you now simply just define your your settings as CSS custom properties, and they're available to you both via the Tailwind approach, but also available just regular CSS custom properties. So that that's probably the biggest one. I also have been using the container query support quite a bit, which I'm a a big fan of the the syntax and Yeah. Yeah. Kinda how it simplifies a a bit of a a tough

syntax and spec. So probably those two. Nice. Yeah. I you know what? I haven't I don't I don't use Tailwind personally. Mhmm. But one of the things one of the reasons why I don't use it is because there you you do have to step outside of Tailwind for things like container queries. So so for me, I'm I'm pretty stoked to see that that's part of it now.

And I actually did really like the syntax when I looked into, what the new container query syntax for Tailwind actually was. So I'm stoked to see those additions. I didn't know that thing about the CSS variable variables before, but that sounds, like quite a bit of an improvement.

Oh, definitely. Yeah. That was it was always kinda funky. And, also, like, while we're talking about the CSS variables is the syntax for using them is a little bit nicer. So previously, it used to be, like, fill dash square brackets Yarn dash dash the name of it, and this the it was just like like, writing CSS variables in CSS is is is quite enough, you know, and then writing them in line is is pretty tricky. So the new syntax does away with needing to wrap it in dash dot or in writing it in Yarn, and you simply just use dash dash, the name of your CSS variable, and that's good. And then and, also, while we're talking about CSS variables, they also have the ability to use, CSS custom property.

What's it called Wes you, like, you register it so that you can use it to animate? Oh, at property.

Yes. At property. And I don't know. Do you do you wanna give a shot of explaining what at property's for? Yeah. At property is basically,

a way to you're defining a variable with more information, such as what type the value JS, is it a number, is it a string, etcetera, and default values, those types of things. The reason why that's important is because if you're strictly defining this as a number, then CSS can interpolate between numbers without having to Wes. Is it a string or number or whatever? And, therefore, like, the biggest, most common use case people say is that it allows for animating gradients, which is something you can't do without it. Yes. Yeah. Animating gradients,

animating a variable that is like a rotation degree. So if you have, like, a a variable that is set to zero degrees and then you you update that variable to, like, 50 degrees, Anything between those two wasn't possible previously because the browser didn't know what that type was. It didn't know that it was a degree value. So now you can register the variable as a degree value or as a as a custom length. Mhmm. And then the browser will know, ah, I understand what that is. I can I can tween between those two things? Yeah. It's it's actually it's part of the, CSS Houdini

API. So, Houdini, something that slowly been making its way into the browser here and there. Mhmm.

So we also have a a new config. I talked about it previously. The the old config was in JavaScript. And if you wanted to define custom variables, you wanted to find some, like, custom utility classes, you always had to, like, duck out and then go into your JavaScript file, which felt a little bit odd. Now you simply your config is CSS.

So in the same spot that you would stick little utility functions that are not part of Tailwind or, maybe custom key frames, things like that, you also stick your Tailwind config. In in there, you can do things like overwrite the colors, add custom colors, change the scaling of of things. Anything you would normally add or overwrite in Tailwind is now done in CSS, which just feels it feels right. You know? It feels how it should be. And you simply just import Tailwind into your CSS,

and you're up and running. There's no JavaScript config that's needed. Yeah. So another big part of this is that it's using something called Tailwind oxide. Oxide is is really using, lightning CSS to simplify how the whole tool chain is working. It also makes it considerably faster.

Lightning CSS is one of those projects that you predicted a little while ago JS going to really take over as far as, CSS parsing, transforming, bundling, minifying, those types of things. It is fast. It is very fast. They even have the benchmark bars to prove it on their website.

But in general, it's just going to simplify the amount of things you need to install, the setup for Tailwind in general, which was also kind of a turn off, for some people, you know, more complicated setup.

So Vercel, also, what is it? Lightning's built in Rust. So, hey. Yep. It's fast. Right?

It works Wes. And there's also, like, a first class Vite plug in now as well. So Yep. If you're just using Vite or you're using any, like, popular frameworks, they just have integration built in with it. You don't have to fuss with the post CSS.

As much as I love post CSS, I can never figure out the, like, 70 different ways to define a post CSS config. You know? Yeah. Like, it's it's almost too flexible, and there's so many different ways to to define things and import things. And and then you don't know if it should be common JS or if you can import it and just so it's nice that it's just tucked away into a,

a nice little v plug in. Yeah. You know what? I've I've been considering writing a this is this is so dumb. But, concerning writing a transform of my own in lightning to do you Node, you can write lightning plug ins pretty easily in terms of, like, custom transforms.

I just have, like, a pnpm envision of, like, a Bos like CSS, syntax that, like, compiles to using modern stuff. Right? So you could use, like, SaaS variables, but it would actually change them into normal CSS variables, that type of thing. Sign? Yeah. But then also, like, mix ins would be pretty trivial to implement.

So you could get, like, some of that stuff just in there without having to, yeah, install a bunch of post CSS plugins. Or seems like something you'll probably regret in Oh. Ten years. That's exactly why I said it's silly. That you invented. Yeah. But Oh, yeah. Hell, yeah. Let's do it.

Yeah. Right. I know. It would be more or Wes, an exercise, not necessarily a, serious project. Yeah.

By default, the colors in Tailwind four are using the,

p three color space? Is it color space? Is that what it's called? Space. Yeah. It's color space. And and, basically, for people who don't know about p three and other color spaces, the amount of colors that our monitor or even browser can display right, before p three, we're kind of in inherently limited.

And once you have p three colors, if your both your browser and the screen support it, those colors will be, just tremendously more vivid, brighter, nicer looking. So if you aren't using p three color, it's really easy to to implement a fallback for p three color. So even if you're not using Tailwind, p three color is something worth learning because the colors really, really pop on it. I although you do have to be careful about the, the browser support. I was doing a demo during one of my talks, and then I the the projector didn't support p three colors. Oh. I was like Shoot. I was like, oh, of course. I should've taken a, e like, I should've realized it's, like, working fine on my computer, right, obviously.

Oh, that's hilarious. I didn't even think about that. But that that makes so much sense that in order to enjoy p three color palettes, you have to have a device that is capable of showing p three color palettes. And and, like, Scott says, that'll give you much more of a wider selection of colors, but then also things like gradients as well are better, vivid, have more of a a color span. How would you describe that?

It's yeah. It's just wider. I don't know. Yeah.

I don't know how color works, but they found some new ones, and now they're in p three. Well, these colors were found they're they warp able to

ones. We have better displays. Yes.

Exactly.

The dynamic utilities and variants, so in tailwind, when you want to do something that is not built into tailwind, use, like, the square brackets. Right? And and that is you can just generate it on demand. So I'll I'll actually use that quite a bit because, like, for example, like, I don't wanna figure out what the REMs are. You know? I just wanna figure out, like, 10 pixels or 20 pixels. So I'll often do, like, padding dash square bracket 10 pixels.

And especially if there's, like, something that's not available inside of the the tailwind defaults, I don't necessarily wanna overwrite the defaults, but I want something that's in between the the options or, CSS grid columns. You know? If there's not a, if you want a specific number of grid columns and it's not available as a utility class, then you use a square bracket. So now a lot more of the dynamic ones don't need that square bracket, Wes you can just say grid columns dash a number, and it will just generate that on the fly for you. And then the same with, like, data attributes. So data attributes is a great way to hold state in HTML. You Node, if something is is on or off or is loading or, is a specific state of a grid, you could you previously would use, like, data dash and then square brackets and say, when this element has a data attribute of loaded, then apply these following styles. Right? Similar to, like, a, a media query or something like that.

So now you can simply just use data dash loaded or data dash whatever data attribute that you want, and it will, again, pick that up, which is is great. Like, the the square bracket syntax looks a little bit funky.

And now with those things being Scott of integrated, first party is is much nicer.

I do wish you could group multiple ones. This is not just a dynamic variant one, but this is just sometimes you want to apply three or four styles when something is in a specific state, and you have to prefix each of those with the with the data dash loaded or with the MD colon or with the, container query prefix, and I find that to be a bit of a pain. I wish there was some I don't know what the syntax would be, but I wish there was some way to just group a whole bunch of them together.

I know you can stick it in a variable and then interpolate it like that, but

I I'm not a not a huge fan of that. There's, like, a truck out back, and Node dog's freaking out. I went to go let my dog inside, and the battery on my Scott lock is Deno. So the door wouldn't open. Oh, no. Yeah. I had to get anybody drilled out again? A key for the front the front door, not the back door. So I'm like, whatever. I'll deal with it later. Oh, man. Yeah. Sorry about that.

The container queries, we we talked about that briefly, but the way that it works is you use at container on your

container. You're, generally, your parent.

And then you can also name them, by putting a slash, which I'm a big fan of that syntax. Right? Like, you have a div, you pop a at container forward slash podcast card on there, and now you can reference that container in any of your child classes. And you could there's a set of, like, small, medium, large, extra small, extra large, etcetera, all the way from three x s all the way to seven x l, and that will just give you different variance.

What there isn't is any, like, utilities for using the container query units.

So with container queries, you get, what, CQW, CQH, which is a hundred CQWs JS is equivalent to a % width of the container.

And that's really nice for resizing fonts or That's great. Yeah. Setting something to be a specific size of the container when it's not a direct parent.

And then there's there's CQI and CQD, d, which is ESLint and or b, inline, which is width, and block, which is height, unless you switch them, which is a whole thing. There's no utilities for using them. And quite honestly, I don't know what the utilities would be for making that easier, but you simply just use the the square bracket syntax to generate them on demand.

There's support for starting style, which is really exciting.

You wanna give a shot at explaining what starting style is, Scott? Yeah. I didn't realize this was part of this, so that's really exciting. I didn't see this in the, blog post. Interesting.

So, starting style allows you to essentially style the thing before it enters the DOM. In the past, what we've done with this type of thing is you're applying a class to something when it enters the DOM, and then after a certain amount of time, you're removing that class and adding another class. This is done more than a year. A one millisecond.

So you can simply if you wanna, like, grow something from 10 pixels wide to a hundred pixels wide, you need that initial

starting style Yeah. To to animate it. Right? This Wes often done in, like, React transition group. Right? Or even, like, the the original Angular animation library handled it this way too. First, there's a class that's, like, entering, entered, exiting, exited, or whatever those those classes are, allowing you to have, like, a smooth transition when something enters the DOM.

So the starting style support is simply just tag starting colon to the front of your selectors, and then those similar to how styles apply at a specific media query breakpoint or a container query breakpoint, these styles will simply just apply in that state. And I I kinda like that, like, state based Yeah. Thinking about CSS because, like, you have loading or not loading. You have breakpoints. You have starting style. You have open with popover. That's another thing they have support for now. If the popover is currently open, you just type open colon, which, quite honestly, that's that's a better syntax than, some of the crazy starting style, allow discrete, popover, all those things, which is kind of a bit of a funky syntax.

Yeah. Yeah. I I do love the, embrace of these new CSS things. Obviously, you could always exit into CSS within while using Tailwind anyways, but it's nice to see, these things drop. Because, again, that was one of the the things that I had against Tailwind Wes always like, well, if I wanna use the new stuff, I'm writing CSS anyways, and I'm having to to bail out of it. So, happy to see this stuff pop in. I still will duck out

in my Tailwind projects to inline styles anytime I need to do anything remotely complex. So, like a like a complex CSS grid layout.

I'm not gonna start writing underscores in Tailwind, because to, like, like, grid calls angle bracket, one f r underscore.

You know? Like, that syntax to me is is not ideal.

And when that's the case, I will simply just write alongside the style attribute of or the class name attribute of my element. I'll just do an inline style block, and then I'll write my I'll write my styles as inline. In in my case, I'm using React, so I write it as a style object. And that's a little bit Node ergonomic to me. Interesting. Descendant selector, if you do want to select all children of an element, which you probably shouldn't be doing, but, of course, with all caveats, there are situations where you'll need it.

The star star colon, selector will will allow you to select everything on a parent and go and get grab the children, which is not something you can do with inline styles.

You can do it with scope styles now with a style tag inside of an element, but not something you do within a straight up inline style.

Yeah. There's some interesting demos of this in action. I guess I don't understand why you wouldn't just write I don't wanna say normal CSS. Because last time I said a real or normal CSS in regards to Tailwind, I had a lot of people angry at Yes. At me. So I don't understand why you would use this syntax, but it okay. It exists. So I I think it's because, like, if you are writing your entire app in Tailwind, and then there are these couple little situations

where you have to dip out.

First of all, you can dip out with an inline style, like I just said. But with the with the case of selecting all children, you can't do that with an ESLint style. So that Node you're now you have two dip outs. You gotta go to, like, a CSS file somewhere and start writing it, and then Mhmm. Then it gets a little bit hard to track.

And so, like, oh, where is this thing? You Node? The the whole benefit to a lot of people of Tailwind is not having a second place where your your styles are being applied.

Yeah.

That's so there's a whole bunch of more little, updates and whatnot to Tailwind. It was a massive effort by the Tailwind team, so congrats to them for shipping it.

Those are sort of my favorites, and I think the the important ones that have come out. Still no support for tech shadow, which they have said, like, it's just too hard to come up with a utility for text shadow. I kinda wish they would just, like, ship, like, six or seven

kinda default text shadows. Yeah. That seems odd to me. Yeah. I I honestly, I've looked I have not looked into the problem at all, so it's easy for me to say, what a what an easy problem to solve. Not not have any context for why, they haven't done it. So because the text shadow has, like, a x, a y, a

spread, and a color.

Right? And having Sanity to apply all of those at once. Sure.

But, like, I like, a the the little ridge, slightly black ridge, I think that it'd be nice. But, of course, you can you can add you can add those utilities yourself. I add tons of utilities myself to my projects because I find them to be handy.

Yeah. But that's all Wes got here. Check it out. Download Tailwind four.

There is a migration tool that will help you. That was, quite honestly, the one of the biggest projects for them for moving up up to Tailwind four was just figuring out what are all the little weird ways that people are using Tailwind, and how do we not break these totally bizarre implementations of things that people have Deno. Totally. You know? There's just all kinds of funky stuff. I moved over from three to four.

Most of it transferred. The only thing was I had I probably had, like, 80 lines of custom tailwind JavaScript for all of that, like, variable stuff and and whatnot.

And I actually just deleted it all and just moved it to regular CSS variables. So, like, quite a bit of the customization just went away when I was able to just move it to CSS. So I highly recommend seeing what the migration would look like for you. Yeah. Well, I'm gonna have to

Scott migrate. I'm gonna have to, learn Tailwind here because, if if you've watched one of our new videos that are coming out on Friday, you then you know that I badly lost a game. So if you wanna check this out, we did a guessing game with Wes, CJ, and I where it was a bunch of trivia. And let me tell you, I bombed Yarn. And I bombed so hard that now I have to build something in Tailwind as a punishment. So, so I'll be working at Tailwind quite a bit, I guess, now to to to fulfill my end of the deal here. Well But if you wanna check that out, we'll do that video. You'll enjoy four, I think. I think. Yeah.

Cool. Yeah. Alright. But, definitely, check that out on YouTube. Youtube.com/syntaxfm.

And, also, we're gonna be doing new, shows like this every single Friday. So Friday on YouTube, Wes CJ and I have been doing some really fun stuff, including that game show, overrated or underrated, and other shows and other, overrated, underrated, those types of things. It's it's been actually a lot of fun. So, check that out.

Cool. Alright. Thanks, everybody, for tuning in. Catch you later. Peace.