Behind the Scenes of Tailwind CSS 2.0

Full Stack Radio


What's up with tail you guys I've been crazy busy lately and I guess like we've released the tailwind playground since the last one I think we. Got To see it early which, yeah perked perks of the CO host position. Yeah. So we put that out, that was like our big kind of release for the last kind of cycle of work and dot got a crazy ton of attention which is cool and People are making stuff with it like I'll one on a pull up the old database here and we can see. How many things are in there? There are. Two thousand, nine, hundred, and sixty nine playgrounds, which doesn't sound like a lot but we don't allow duplicates to be stored in the database. So if someone tries to save like something someone else's already made or they try to save the demo, it'll um it'll not store like a new crash. So sure those are all unique which is kind of cool and actually a lot when you think about it Yeah. And people seem to be liking a lot. We haven't done a good job of like linking to from the dockside or anything you. Get on eventually. Yeah. But Yeah. It's pretty sweet it's really slick I. Love. The intelligence integration is huge. I. Think that sets it apart from every other used browser. Yeah the live updating as you like hit up and down through the auto complete you don't even have to like hit enter to see like the change in color or padding whatever lets you just like like designing in the browser with your Arrow keys basically. Yeah. It's Fan. I like the experience you get that crow to the class panel but like best because it's in the right order and And it's only 'til you know. Yeah. Yeah. It's pretty good. Pretty good. So Great Job Team Now we this last week we started working on like our next work psycho, which is basically. Released when to that's like the big thing so I haven't working on all things related to that. Of course, I underestimated how work it would be just to like. You know when you're hitting a breaking release, there's so much like My sure. That's every tiny little thing that I want to change because this is like my only chance to make a couple of little change is. What it's like. You're making A, we're not making many changes really No class names are changing at all I. Don't think except for the we changed like call gap to gap acts in roh-gap to gap Y, but we already changed like before two point. Oh. But we just have brushed shipping both versions for awhile but not documenting the old ones so I don't think that's Going to be like a racing change for most people, and it's like super define replace to change that one. We're not changing any other class names So the only other breaking changes are super minor. It's like in your configure file. You know how you could set like a default border color by saying like default and then the color that sort of thing it. Anyplace in the configured where we were using defaults to be like a special word that meant something like it meant like don't add a suffix to the class name. We've replaced that with default in all caps so that it stands out and. Johnston. And we did it because there's some utilities where you actually want use the word default. So like we already have class called cursor default, for example, that sets like the cursor to D- phones, defaults of real value for that. So was kind of weird that default meant different things depending on like the yeah. So this felt like worth it because it's just like a go through and opera case a couple of things and most people probably won't have to do anything because. It's surprisingly. Like it's surprising how few people actually customize like the FIG A lot. You know it's just me. Yeah. Most of the changes just like being changed automatically in the default can fig. So if you haven't over ridden them, you won't even change it anyways Let me see what other stuff we we do in here open the very, very logical breaking change for like two data. Yeah. It just makes it a little bit better. And more predictable. I we dropped I e eleven support. Actually that's like the biggest breaking. Jane? I applaud that yes, it's not even a breaking change in the way that. It's a breaking change, but it's like. Not. Like Oh, now I have to do a bunch of work to upgrade to tell him to buy. No it's like you either can upgrade and it takes no work or you can't upgrade right right or you can pitch in and build the I guess it wouldn't be Apollo but like a preset, right? Yeah. Yeah. So I've toyed with this idea that you can totally like this precepts feature until. When now where you can say like instead of extending the tailwind defaults extend like my own defaults and because of how like plug into the tail and stuff is you can actually take like one of our utilities that doesn't work in I eleven like transform stuff is designed in an eleven incompatible way. You could literally just like disable those Plug Ins as part of your preset and include your own plug ins. Eleven scale I eleven rotate I eleven translate. That are less powerful but actually work in eleven sort of doing nothing, which is what are currently do right. And those could still read from like the same theme keys and stuff you know. So you wouldn't have to you basically just be like ripping out the core plug in swapping in a poly fil instead, and if someone just builds maintains it in, you know it's like transparent to the end user. So Gotcha, we might do that or I might just say someone else do that. If you care because I don't care about my own sites. In smaller too because like we used to ship. For every color utility, we have to convert the colors to RGB as we can have a variable portion for the Passi because we use CSS variables to let you get changed the opacity on color but because that doesn't work nine eleven, we ship the HEX code directly behind him as a fallback and. The colors like the biggest part of the whole build. So all of it, every single color had an extra declaration and even with perch CSS, it would keep it because purchase that's only deletes the whole class. It doesn't like delete parts of the class you know what I mean. Sure. Yeah. So now it'll be even smaller in that regard although it's bigger in other ways because we're adding things to it. I A couple of extra cutler, a couple of a couple of that. We're actually being less colors. So Oh, you've extract you're you're extracting them and making them opt in right So that's what we've done. The new defaults are. Gray. Red Yellow Green Blue Purple and pink,

Coming up next