877: Tailwind 4

Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?” Show Notes 00:00 Welcome to Syntax! 00:16 Brought to you by Sentry.io. 01:03 Tailwind 4. Tailwind CSS V4.0 Blog. 02:53 Wes’ favorite new feature. 05:45 @property. CSS Houdini API. 07:28 The config is now a CSS file. 08:25 Tailwind Oxide. 10:48 P3 color space. 12:36 Dynamic Utilities + Variants. 13:36 Data attributes. 15:32 First class container query support. 17:03 Starting Style. 19:22 When to use inline styles. 20:13 Descendant selector. Styling Descendants. 20:48 Why not just use “normal” CSS? 22:03 No text shadow support. Scott has to use Tailwind. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. On this Monday episode, we're going to be talking about Tailwind 4. This thing just dropped, so we're going to be talking all about what's new, what's changed, why you should care about Tailwind 4. But let me tell you what you should also care about. Sentry.io, it's the perfect place to really ship excellent applications because, let me tell you, there's so many tools within Sentry for finding either bugs, issues, slowdowns, all that stuff with your site. And there's no better place to do it than Sentry because through Sentry's UI, you can quickly solve bugs. And there's some really awesome fix-it-for-me AI tools

• 0:45Scott Tolinski?

  that are coming to Sentry as well. So check it out at Sentry.io/Synthesis. Sign up and get two months for free. Use the coupon code TASTYTREAT to get those two months, by the way.

• 1:03Wes Bos?

  Sweet.

• 1:04Scott Tolinski?

  Yes, sweet indeed. Speaking of sweet, let's talk about Tailwind 4 because this thing just dropped and there's a number of improvements, quality of life changes. And a lot of these things 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 4 has a smaller engine, it has faster build times, and it has more modern CSS features. There's some, there's some other little things here and there too, but big picture, that's it.

• 1:40Wes Bos?

  Yeah, I think people who are using Tailwind, they're going to be excited about different things. A bunch of people listening are going to be really excited that the modern CSS has been added. So things like CSS layers, container queries, color mix, pop over, 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 in Tailwind via

• 2:08Wes Bos?

  The ways that they have implemented them. And then other people are going to 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 figure all that out. So that improvement is going to be exciting for a lot of people. And then other people are just going to be excited about a lot of the new like syntax upgrades, you know, just easier ways to, to approach writing tailwind things that maybe were a little bit of a struggle previously

• 2:49Wes Bos?

  are now much nicer. So let's get on into it. The first thing we have here is the new config file.

• 2:54Scott Tolinski?

  Actually, Wes, before we do get on into it, what is your favorite addition here?

• 3:00Wes Bos?

  Um, so I've been using it for about six months now and I've been like on all the betas and kind of moving up on through it. And the pieces that I have liked the most are the first class support for CSS variables. Because what I was doing previously is if you set a variable in Tailwind 3, 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,

• 3:41Wes Bos?

  relative color, I was using them in color mix, I was using them on inline styles, I was passing them to JavaScript functions.

• 3:50Scott Tolinski?

  Geez, yeah.

• 3:51Wes Bos?

  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 4 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's probably the biggest one. I also have been using the container query support quite a bit, which I'm a big fan of the, the syntax and kind of how it simplifies a bit of a tough. Syntax and spec, so probably those two.

• 4:35Scott Tolinski?

  Nice. Yeah, you know what? I haven't, I don't, I don't use Tailwind personally. 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 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 variables before, but that sounds like quite a bit of an improvement.

• 5:07Wes Bos?

  Oh, definitely. Yeah, that was, it was always kind of 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, var, dash, dash, the name of it. And this, it was just like, like writing CSS variables in CSS 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, or in writing it in var, and you simply just use 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.

• 5:54Wes Bos?

  What's it called? When you, like you register it so that you can use it to animate?

• 5:58Scott Tolinski?

  Oh, @property.

• 6:00Wes Bos?

  Yes, @property. And I don't know, do you, do you want to give a shot of explaining what @property is for?

• 6:05Scott Tolinski?

  Yeah, @property is basically a way to, you're defining a variable with more information, such as what type the value is, is it a number, is it a string, et cetera, 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 the numbers without having to guess, is it a string, a number, 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.

• 6:40Wes Bos?

  Yes, yeah, animating gradients, animating.

• 6:45Wes Bos?

  A variable that is like a rotation degree. So if you have like a variable that is set to zero degrees and then you you update that variable to like 50 degrees and 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. And then the browser will know, ah, I understand what that is. I can I can tween between those two things.

• 7:17Scott Tolinski?

  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.

• 7:28Wes Bos?

  Hmm. So we also have 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 keyframes, things like that, you also stick your Tailwind config. And 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

• 8:12Wes Bos?

  now done in CSS, which just feels it feels right, you know? That feels how it should be. And then you simply just import Tailwind into your CSS and you're up and running. There's no JavaScript config that's needed.

• 8:25Scott Tolinski?

  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 was 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 is also kind of a turnoff for some people, you know, more complicated setup.

• 9:09Scott Tolinski?

  So overall, also, what is it? Lightning's built in Rust. So, hey, it's fast, right?

• 9:15Wes Bos?

  It works well. And there's also like a first class V plugin now as well. So if you're just using V 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? Like it's, it's almost too flexible and there's so many different ways to to define things and import things and then you don't know if it should be common JS or if you can import it and just huh. So it's nice that it's just tucked away into a nice little V plugin.

• 9:51Scott Tolinski?

  Yeah. You know what? I've been considering writing a, this is, this is so dumb, but concerning writing a transform of my own in Lightning to, you know, you can write Lightning plugins pretty easily in terms of like custom transforms. I just have like an envision of like a SAS like CSS syntax that like compiles to using modern stuff, right? So you could use like SAS variables, but it would actually change them into normal CSS variables.

• 10:20Wes Bos?

  Oh, like dollar sign?

• 10:21Scott Tolinski?

  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.

• 10:32Wes Bos?

  That seems like something you'll probably regret in

• 10:34Scott Tolinski?

  Oh.

• 10:34Wes Bos?

  three years.

• 10:35Scott Tolinski?

  That's exactly why I said it's silly.

• 10:37Wes Bos?

  That you invented. Yeah.

• 10:38Scott Tolinski?

  Oh, yeah.

• 10:39Wes Bos?

  Hell yeah. Let's do it.

• 10:41Scott Tolinski?

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

• 10:47Wes Bos?

  Yeah. By default, the colors in Tailwind 4 are using the P3 color space. Is it color space? Is that what it's called?

• 10:55Scott Tolinski?

  It's a color space. Yeah. It's a color space. And basically for people who don't know about P3 and other color spaces, the amount of colors that our monitor or even browser can display, right? Before P3, we're kind of inherently limited. And once you have P3 colors, if you're, 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 P3 color, it's really easy to implement a follow. Back for P3 color. So even if you're not using Tailwind, P3 color is something worth learning because the colors really, really pop on it. Although you do have to be careful about the

• 11:35Scott Tolinski?

  the browser support. I was doing a demo during one of my talks and then I, the projector didn't support P3 colors. I was like, oh, of course I should have taken, like, I should have realized it's like working fine on my computer, right? Obviously.

• 11:51Wes Bos?

  Oh, that's hilarious. I didn't even think about that. But that that makes so much sense that in order to enjoy P3 color palettes, you have to have a device that is capable of showing P3 color palettes. 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 color span. How would you describe that?

• 12:19Scott Tolinski?

  It's, yeah, it's just wider.

• 12:24Wes Bos?

  I don't know how color works, but they found some new ones and now they're in P3.

• 12:28Scott Tolinski?

  Well, these colors were found, they were able to display new ones. We have better displays. Yes.

• 12:34Wes Bos?

  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 that is, you can just generate it on demand. So I'll actually use that quite a bit because like, for example, like, I don't want to figure out what the REMS are, you know, I just want to 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 Tailwind defaults, I don't necessarily want to overwrite the defaults, but I want something that's in between the the options

• 13:15Wes Bos?

  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 where 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 know, if something 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

• 13:59Wes Bos?

  of loaded, then apply these following styles, right? Similar to like 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 square bracket syntax looks a little bit funky. And now with those things being sort 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

• 14:40Wes Bos?

  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.

• 15:10Scott Tolinski?

  There's like a truck out back and the dog's freaking out. I went to go let my dog inside and the battery on my smart lock is dead. So the door wouldn't open.

• 15:21Wes Bos?

  Oh no.

• 15:22Scott Tolinski?

  Yeah.

• 15:23Wes Bos?

  Get it drilled out again?

• 15:24Scott Tolinski?

  A key for the front, the front door, not the back door. So I'm like, I'm whatever. I'll deal with it later.

• 15:30Wes Bos?

  Oh man.

• 15:31Scott Tolinski?

  Yeah. Sorry about that.

• 15:32Wes Bos?

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

• 15:39Scott Tolinski?

  Container.

• 15:40Wes Bos?

  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.

• 15:59Scott Tolinski?

  Yeah.

• 16:00Wes Bos?

  There's a set of like, small, medium, large, extra small, extra large, et cetera, all the way from 3XS all the way to 7XL. And that will just give you different variants. 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 100 CQWs is equivalent to 100% width of the container. And that's really nice for resizing fonts or

• 16:32Scott Tolinski?

  Oh, great.

• 16:33Wes Bos?

  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, which is inline 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.

• 17:01Scott Tolinski?

  Hmm.

• 17:03Wes Bos?

  Is there support for starting style, which is really exciting? You want to give a shot at explaining what starting style is, Scott?

• 17:10Scott Tolinski?

  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 was done like

• 17:35Wes Bos?

  Like a one millisecond. So you can simply, if you want to like grow something from 10 pixels wide to 100 pixels wide, you need that initial starting style

• 17:45Scott Tolinski?

  Yeah.

• 17:46Wes Bos?

  to animate it, right?

• 17:47Scott Tolinski?

  This is often done like React transition group, right? Or even like the the original Angular Animation Library handled it this way, too. First as a class, it'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.

• 18:04Wes Bos?

  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 kind of like that, like state based

• 18:26Scott Tolinski?

  Yeah.

• 18:26Wes Bos?

  thinking about CSS, because like you have loading or not loading, you have breakpoints, you have starting style, you have open with pop over. That's another thing they have support for now. If the pop over is currently open, you just type type open colon, which quite honestly, that's that's a better syntax than some of the crazy starting style, allowed discrete, pop over, all those things, which is kind of a bit of a funky syntax.

• 18:57Scott Tolinski?

  Yeah, yeah, 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 was always like, well, if I want to use the new stuff, I'm writing CSS anyways. And I'm having to bail out of it. So happy to see this stuff pop in.

• 19:22Wes Bos?

  I still will duck out in my Tailwind projects to inline styles. Anytime I need to do anything remotely complex, so like a

• 19:33Wes Bos?

  Like a complex CSS grid layout, I'm not going to start writing underscores in Tailwind to like, like grid calls angle bracket, one FR 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 my case, I'm using React, so I write it as a style object. And that's a little bit more ergonomic to me.

• 20:11Scott Tolinski?

  Interesting.

• 20:12Wes Bos?

  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 allow you to select everything on a parent and go and 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 with a straight up inline style.

• 20:48Scott Tolinski?

  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 want to say normal CSS, because the last time I said a real or normal CSS in regards to Tailwind, I had a lot of people angry at me. So I don't understand why you would use this syntax, but it, okay, it exists. So.

• 21:07Wes Bos?

  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 inline style. So that now you're, now you have two dip outs. You gotta go to like a CSS file somewhere and start writing it. And then, then it gets a little bit hard to track. And so like, oh, where is this thing? You know, that the whole benefit to a lot of people of Tailwind is not having a second place where your, your styles are being applied.

• 21:46Scott Tolinski?

  Yeah.

• 21:48Wes Bos?

  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 Tech Shadow. I kind of wish they would just like ship like six or seven kind of default Tech Shadows.

• 22:15Scott Tolinski?

  Yeah, that seems odd to me. Yeah, I honestly, 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. Yeah, not have any context for why they haven't done it. So.

• 22:28Wes Bos?

  Because a Tech Shadow has like a X, a Y, a spread and a color, right? And having a utility to apply all of those at once.

• 22:41Scott Tolinski?

  Sure.

• 22:42Wes Bos?

  But like I like the little ridge, a slightly black ridge, I think that it'd be nice. But of course, you can you can add those utilities yourself. I add tons of utilities myself to my projects because I find them to be handy. But that's all we got here. Check it out. Download Tailwind 4. There is a migration tool that will help you. That was quite honestly, the one of the biggest projects for them for moving up to Tailwind 4 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 done?

• 23:22Scott Tolinski?

  Totally.

• 23:23Wes Bos?

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

• 23:55Scott Tolinski?

  Yeah, well, I'm gonna have to, not migrate, I'm gonna have to learn Tailwind here because if you've watched one of our new videos that are coming out on Friday, then you know that I badly lost a game. So if you want to 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 hard and I bombed so hard that now I have to build something in Tailwind as a punishment. So I'll be working at Tailwind quite a bit, I guess, now to fulfill my end of the deal here. But if you want to check that out.

• 24:28Wes Bos?

  Four will be, you'll enjoy four, I think. I think you'll, cool.

• 24:32Scott Tolinski?

  Yeah.

• 24:32Wes Bos?

  All right. But definitely check that out on YouTube.

• 24:35Scott Tolinski?

  It's hilarious.

• 24:36Wes Bos?

  Youtube.com/�XFM.

• 24:38Scott Tolinski?

  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 been actually a lot of fun. So check that out.

• 24:55Wes Bos?

  Cool. All right. Thanks, everybody, for tuning in. Catch you later.

• 24:58Scott Tolinski?

  Peace. Peace.