Tailwind 4

you could you previously would use, like, data dash and then square brackets

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

ones. We have better displays. Yes.

so in tailwind, when you want to do something that is not built into tailwind,

or, CSS grid columns. You know? If there's not a,

state in HTML. You Node, if something is is on or off or is loading or,

is a specific anytime I need to do anything loop over all of my tailwind variables I probably had, like, 80 lines of custom tailwind JavaScript for all of that, like, variable stuff and and whatnot.

CSS,

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,

before p three, we're kind of in inherently limited.

the tailwind defaults, I don't necessarily wanna overwrite the defaults, but I want something that's in between the the options data attributes. So data attributes is a great way to hold

to do you Node, you can write lightning plug ins pretty easily in terms of, like, custom transforms.

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

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, of things that people have Deno. Totally. You know? There's just all kinds of funky stuff. I moved over from three to four.

color palettes, you have to have a device that is capable of showing add or overwrite in Tailwind is now done in CSS, 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 some of the crazy starting style, allow discrete,

more complicated setup.

container query JSX files, and and you need to scan

I know you can stick it in a variable and then interpolate it like that, but tag starting colon it feels right. You know? It feels how it should be. And you simply just import Tailwind into your CSS, 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, That's so there's a whole bunch of more little, apply all of those at once. Sure.

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

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

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

It's yeah. It's just

The dynamic utilities and variants, JavaScript functions. Jeez. Yeah. And I had to, like, write this, like, little layer that would essentially just

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.

And especially if there's, like, something that's not available when I was able to just move it to CSS. So I breakpoints. You have 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 so it's nice that it's just tucked away into a, 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 There is a migration tool that will help you. That was, quite honestly, the one of the biggest that's a little bit Node ergonomic 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 CSS custom properties, and they're available to you both 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 Yeah.

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.

I just have, like, a pnpm envision of, like, a Bos like

p three color palettes. And and, like, Scott says, that'll give you much more of a wider quite a bit of the customization just went away seeing what the migration would look like for you. Yeah. Well, I'm gonna have to where 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 if you do want to select all children of an element,

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,

sometimes you want to apply 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

So you could get, like, some of that stuff just in there without having to, happy to see this stuff pop in. I still will duck out So Vercel,

inside of the liked the most are 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 that has, I don't know, 20,000 little utility functions that are not part of Tailwind or, And then there's there's CQI and CQD, By default, the colors in Tailwind four are using the, 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,

10 pixels.

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.

better, vivid, have more of a a color span. How would you describe that? select everything on a parent and go and get grab the children, which is not something you can do with inline styles.

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.

built in with it. You don't have to fuss with the post CSS.

state of a grid,

wider. I don't know. Yeah.

just tremendously

take over as far as,

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.

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.

in that state. And I I kinda like that, like,

how styles apply at a specific media query breakpoint or a container query breakpoint,

quite honestly, that's that's a better syntax than,

allows you to essentially style the thing before it enters the DOM. In the past,

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

state based Yeah. Thinking about CSS because, like, you have So I've been using it for Exactly.

loading or not loading. You have one f r underscore.

So the starting style support is simply just You can do it with scope styles now

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

Sweet. Wes. Sweet indeed.

Sign up and get two months for free.

This thing just dropped, so we're gonna be talking all about what's new,

what's changed, Speaking of sweet, let's talk about

It's the perfect place to really ship also, what is it? Lightning's built in Rust. So, hey. Yep. It's fast. Right?

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

four. But let me tell you what you should also care about, century.io.

like, writing CSS variables in CSS is is is quite enough, you know, and then writing them in line is is pretty tricky. So

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

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.

I don't use it is because

And I actually did really like the syntax when I looked into,

the first class support for CSS variables.

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.

via yourself. I add tons of utilities myself to my projects because I find them to be handy.

like, calculation, and then stick them on the root of the document year or year and a half on this podcast are mostly now available ESLint Tailwind via the modern CSS has been added. Yes. So things like, CSS layers, container queries, color mix, popover, So with container queries, you get, what, CQW, selection of colors, but then also things like gradients as well are

square brackets Yarn dash dash the name of it, and this the it was just like

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 Yeah. Yeah. I I do love the,

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,

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

I was using them in color mix. I was using them on inline styles. I was passing them to, You know? Like, that syntax to me is is not ideal.

like quite a bit of an improvement.

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.

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 open colon, which, I actually just deleted it all and just moved it to regular CSS variables. So, like,

favorite edition here? if you're strictly defining this as Lightning CSS is one of those projects that you predicted a little while ago JS going to really

Mhmm. Because what I was doing previously is a media query or something like that.

I was using them in, So you can simply if you wanna, like, grow something from Cool. Alright. Thanks, everybody, for tuning in. Catch you later. Peace.

And then, like, I also needed those variables available via, like, regular CSS custom properties because

spread, relative color.

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

learn Tailwind here because, And once you have p three colors, if your both your browser and the screen support it, those colors will be,

like 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 There's support for starting style, which is really exciting.

what are all the little weird

with a style tag inside of an element, but not something you do within a straight up inline style.

within while using Tailwind anyways, but it's nice to see, why you should care about Tailwind

Right? And having Sanity to CQH, which is

projects for them for moving up up to Tailwind four was just figuring out

to, like, like, grid calls angle bracket, with the data dash loaded or with the MD colon or with the, you have to dip out.

demos of this in action. I guess I don't understand

and a color.

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 As much as I love post CSS, I can never figure out the, like, you now simply just define your your settings as to the front of your selectors, and then those

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,

totally bizarre implementations which you probably shouldn't be doing, but, of course, with all caveats, there are situations where you'll need it.

Yeah. There's some interesting

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

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,

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,

ways that people are using Tailwind, three or four styles when something is in a specific state, and you have to prefix each of those with the selector similar to as, like, regular CSS custom properties. And that's no longer needed with with tailwind four because

overrated, underrated, those types of things. It's it's been actually a lot of fun. So, check that out.

updates and whatnot to Tailwind. It was a massive effort by the Tailwind team, so congrats to them for shipping it.

remotely complex. So, 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.

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

Scott migrate. I'm gonna have to,

where your your styles are being applied.

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,

will will allow you to all of these, like, new CSS things that we've been talking about over the last 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, these styles will simply just apply

embrace of these new CSS things. Obviously, you could always exit into CSS

And when that's the case, I will simply just write alongside because Most of it transferred. The only thing was I had to me. Interesting. Descendant selector, and say, when this element has a data attribute of loaded, 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.

why you wouldn't just write 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.

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

And

I'm not gonna start writing underscores

and how do we not break these

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

I bombed Yarn. And I bombed so hard that now I have to build something in Tailwind as a punishment. So,

a number, 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 am excited to see arrive.

you're defining a variable with more information, such as what type

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

your config is CSS.

a way to

the browser didn't know

then CSS can interpolate between numbers 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.

slowly been making its way into the browser here and there. Mhmm.

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,

Oh, at property.

API. So, Houdini, something that

for making that easier, but you simply just use the the square bracket syntax to generate them on demand.

podcast 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,

in any of your child classes. And you could there's a set of, like, And now your CSS variable, in Tailwind, in my Tailwind projects to inline styles popover, all those things, which is kind of a bit of a funky syntax.

is equivalent to a % width of the container.

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.

a hundred CQWs JS

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.

container. You're, generally, your parent.

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

card on there, and now you can reference that container

four.

Welcome to Syntex.

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

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 a like a complex CSS grid layout.

which just feels

lightning CSS to simplify 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.

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,

So in the same spot that you would stick 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

and it has more modern CSS features. And there's some there's some other little things here and there too, but big picture, how the whole tool chain is working. It also makes it considerably faster.

has a smaller ESLint, it has faster build times,

all of those files to figure out which classes are in there. And,

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

to to approach,

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

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

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 highly recommend The star star colon,

And a lot of these things are are definitely things that I personally

writing, tail, and things that maybe were a little bit Anything between those two wasn't possible previously because 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 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 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

A bunch of people listening are gonna be really excited that

So I guess maybe, like, the big picture view of this is that Tailwind four