This is the full transcript of Tailwind Connect 2023 — Keynote, published on YouTube by Tailwind Labs. Every paragraph carries the moment it was spoken, so you can click any line to jump straight to that point in the video, search the whole thing for a word, or copy it out.
0:00[Applause] thank you hey everyone [Applause] so back up until about 2014 this is how I wrote All My CSS the way that I would build stuff is I would open an HTML file write all the markup that I needed for the feature that I was trying to implement and when I was satisfied with that drop in a couple sort of class names as hooks jump over to the CSS file and then figure out how to select all that HTML and style it however I needed to style it and it worked in the sense that the pixels that were rendered on the screen were the pixels that were in the design
0:41generally but no matter how hard I tried to keep my CSS organized to try to make things maintainable rules and guidelines that we implemented on our teams to keep things under control the CSS in every project I worked on was always the first thing to just spiral completely out of control into this unmaintainable spider web of that everyone on the team was afraid to touch so around that time 2014 I decided to kind of just like make it my mission to figure out what the hell I was doing wrong and what I had to do to come up with style sheets so I could revisit three four five six months later and
1:20still feel confident in the changes that I was going to be making to to the project because simply just didn't have that so I started just consuming every bit of content I could find on the internet about writing awesome CSS watching every conference talk that I could find reading every book buying every course reading every CSS tricks article on CSS architecture and then one day I stumbled across this article by this guy Nicholas Gallagher who's the creator of normalized CSS and was working at Twitter at the time called about HTML semantics and front-end architecture and in that article he makes the argument that the most reusable components are those with class
1:59names that are independent of the content and that instead of writing classes like this that sort of describe the block of HTML like the thing that we're building that we then jump over to our CSS and hook into in style that we should be writing classes more like this like card that just like describe the visual pattern in the UI that we're trying to build because a class like card can be used to build anything that looks like a card not just a user profile so I heard this and I thought wait a minute I thought we kind of agreed and that there was some consensus
2:36at least around people that I consider to be smarter than me that putting presentational information in your HTML was just like a faux pas and that was the road to maintainability hell that was the thing that made your code suck that made it hard to tame and keep under control but Nicholas here was saying that all that effort that I was putting in to try and make my CSS maintainable was actually the thing that was causing my CSS to be unmaintainable and that if I wanted things to be maintainable especially at scale like he was working at Twitter you know a huge site that I needed to do the
3:10exact opposite of what I thought I was supposed to do if every Instinct you have is wrong then the opposite would have to be right so at this point I decided to sort of throw out all the existing beliefs I had about how to write CSS and what I thought was important in terms of my markup and what information should go where and I decided to sort of sacrifice all of the sort of purity of my HTML and decide to stop caring about leaking presentational information into my HTML and instead treat my CSS as this sort of holy place where I needed to protect it at all costs from knowing
3:51anything about the actual site that I wanted to build in terms of content I wanted to start writing all my CSS like a third-party Library where it has no clue where it's going to be consumed or who's going to use it to build what so I take classes like this like this chat notification class and I would see okay well on the screen this looks like a card so I'm going to call this card instead and now anytime I see other cards well I can use this class but what I started to run into was that I'd find other things in the UI that were very very very very very very
4:23close to this but maybe the difference was instead of having a shadow and instead of being constrained to a certain width this thing that otherwise was exactly like a card was full width with no Shadow had the same border radius the same background color the same padding it was a card it just didn't have a shadow and it extended to the full width of the parent element so in the spirit of making things as reusable as possible this led me to do things like break up classes like card into multiple classes so card MD here is responsible for setting the max width of the card and card shadowed is
4:57responsible for saying well this card should have a shadow and that way I can use the card class without that modifier if I ever just want to make a card without a shadow but then when I was looking to the CSS for this sort of stuff I noticed that like the card shadowed class only did one thing it literally just set a box Shadow and the Box Shadow you know I wasn't specifically related to even cards at all it was really just about elevation there were other things in my project that definitely weren't cards that had the exact same box Shadow so again in the spirit of sort of
5:28reusability it became clear that well maybe I should just call this class Shadow and then anytime I want to give anything this Shadow I can just stick that class on there and be good to go so you can sort of Imagine like the natural conclusion of this is that stuff that looked like this started to look like this and this probably looks familiar to most of the people in here if you don't use Tailwind I don't know why you're here this is a celebration um but you know you probably know the rest of the story from here at this point I sort of realized okay when I'm writing my CSS
6:02this way and I need to build some piece of UI most of the time I didn't even have to write CSS at all I could just build the thing I wanted to build using the existing pieces that I'd made and even more interesting was that I could start a brand new project with a different design and copy the CSS files from the last project and still not have to write any new CSS and still be able to implement fairly custom looking designs so that's when it became clear to me that there was potential for this to sort of get extracted into some sort of library or framework and that became
6:32tail and CSS v0.1.0 and this is this is exactly what Mac OS looked like at the time that we released that so fast forward to today we're like almost six years later this was I think October 31st 2017. we're on Tailwind CSS you know B 3.3 it's seen so many changes and so many improvements you know the framework is installed now over 25 million times per month which makes it the most downloaded framework most downloaded CSS framework on all of npm which is absolutely insane to me um the framework in total has been installed 300 million times over 3.3 million unique installations of our intellisense plug-in and this is
7:26literally unique installs like on a separate account on a computer if you download it again after uninstalling it it doesn't count so like there's literally millions of human beings that are using the CSS framework it's absolutely crazy and it's used by over 5 million open source projects on GitHub sorry Craig Frederick I know you're the only one who's supposed to use that animation but I'm trying it out today even like major companies like Shopify are using Tailwind CSS now to build things like this new marketing site experience that they released a couple months ago Netflix is using Tailwind for sites like this Global top 10 page
8:05open AI all their marketing sites are built with tail and CSS and even chat GPT itself is built with tail and CSS and there's a bunch of elements in chat gbt that are actually built with Tillman UI so every time that chat CBT logs you out of your session because you haven't used it in a while you get that little modal that pops up that was me or Mr Beast is using today with CSS for some of his Brands and what I love about this example is that like the vision for Tailwind from the beginning was to create this layer of abstraction that still let you build absolutely anything
8:38and this is not what I had in mind and they were still able to build a crazy set like this would tell when so at this point like when a new website comes out I'm almost more surprised when it's not built with Tailwind than when it is and that's just like an absolutely crazy feeling to me so you know like I said the framework's been around for almost six years now and there's never been a single time where we've tried to get a bunch of people who liked Tailwind CSS in the same room there's never been a single local Meetup a single conference you know anything so this is the very first
9:12time ever that we've tried to gather a bunch of people from the Tailwind Community into sort of one place and sort of celebrate like what we've accomplished here so I just want to say thank you so much to everyone who made it out here some people flew in from like Germany to come to this event so thank you so much for being a part of this thank you for so much for being part of the Tailwind community and helping us build this thing into into what it is today [Applause] so with that said like you know we've built this tool that's this really capable tool that's used by
9:49millions of people to build some of the world's biggest websites you know where do we go from here what are we focused on so that's kind of what I want to spend a bunch of time talking about tonight so one of the things that we've always invested in that's always been really important to us is sort of making sure that Tailwind always lets you take full advantage of all the latest and greatest coolest stuff in CSS and the web as a platform so we sort of always have our finger on the pulse of what's coming in CSS and what new stuff has been released what stuff is you know being prototyped
10:21in different browsers and trying to find ways that we can expose those features to you so you can build awesome stuff with it so to walk through some of the coolest new stuff that's landed in CSS recently and how you can take advantage of it until end I'd like to welcome Rising YouTube sensation Sam Celica [Applause] thanks bud all right this is one hell of a Meetup jeez um who's ready for some mob programming sound good um what's that
11:01Center div no come on that's so 2018. we're in 2023 now we're gonna be doing a little more in centering a div here um so yeah I'm just gonna run through five quick demos here and uh just show off some cool stuff that you can do with Tailwind maybe you've seen it maybe you haven't and um just talk about some cool stuff uh that's kind of why I'm here so to start uh we have this little mock site um it's like a cool brand it has like this little lime green flavor to the icon here and we have the settings page probably looks like a lot of similar
11:36things that a lot of you have built before one of the things that's a bummer about these native HTML controls is this kind of default blue treatment and we you know we're so used to being able to customize things as web developers and then we get to these native controls and it's a bummer we can't change them right well one thing that I learned um that Taiwan added recently is this little class called accent so if we find this show or player the show player controls checkbox right here you might not know this but we have a utility called accent and this gets all of the colors in Tailwind so we can find
12:11our lime go straight to 400 and if I say this come on I said we're mob programming here I'm not getting any help oh probably need to refresh okay there we go so uh we can just add this accent class to any one of these utilities uh this utility class to any one of these controls here rather and look at all this cool stuff that we get we get um the the focused the active State we get the when we hold it down and um that's a little bit different on um both of those States but we don't have to do this with every single one of
12:53these right we can take this off go to the root div here and we can just add accent lime 400 just like that and we're going to get that for all of these controls just like that and if we hover over this class in the HTML we're going to see it's setting this accent color CSS property just something that I had never heard about before but I saw this in a release from Tailwind so this is uh I thought it's just like a nice easy little example how Tailwind helps me stay up to date with what's going on in CSS at this point I've been using it for
13:22about five years and I feel like I've basically outsourced that entire job of staying up to date with when browsers are ready for things Tailwind does such a good job educating you about when a property is ready and when it's useful but it also gives us tools to do stuff if we want to be a little bit more bleeding edge and experimental so let's go to the second demo here and this is the Boca Breeze which is another Seinfeld reference you can tell Adam has a thing for Seinfeld but this is a fun little internet newspaper demo here let's go ahead and find this page and uh this has kind of a cool look to
14:00it but I think it'd be nice if we could make this title the heading here kind of fill up the whole page just like you would see in like a classic newspaper and the way you might do this normally is just with you know responsive prefixes and normal text size utilities right so maybe when we're down small 7x is okay maybe actually down here we want to start it off at 5X and that looks all right but maybe when we get to small screen we go to 7xl you probably all know this so once we get to a certain size the text should jump up and maybe instead of seven we can go to
14:35nine something like that but there's a kind of a new technique or a technique I wasn't hadn't never really thought about before which is um fluid something that the font size to be a fluid size based on the width or the height of the viewport and Tailwind doesn't have a first class API for this there's no utility that's built in but with arbitrary value syntax which is with the square brackets which works on any property in Tailwind we can do anything we want here so I could set this to be 60 pixels and we'll get 60 pixels but I can also set it to be 10 VW and now it's 10 of
15:15the overall width of the viewport and so if I start changing this we see that it kind of shrinks when it grows so maybe let's bump this up to 20 something like that and that looks that looks pretty good here now we get too small it kind of collapses so um maybe we'll go to 19 something like that that looks pretty good and then when we get too big we see that it gets too big as well so why don't we use another Pro another feature from CSS which is the Min function and we're going to make sure it never gets bigger than let's say
15:50100 pixels see how that looks maybe 120. 130 something like that and so now we can see even if our V Port gets bigger the text stops and so this is just another example of you know the first example we saw Tailwind bringing a first class API utility when it's kind of ready for prime time but any CSS feature that you're excited about that you hear about on Twitter or you read a blog post about I love that you can experiment with it right until without having to wait for them to add or a new release to come out to support that feature so that was a fun little
16:23um a fun little demo I thought and let's go back and go to our third demo and this is a problem a lot of you have probably run into before this is kind of uh you know a hero treatment something you maybe see on the home page of a product or a website and this H1 here usually has it receives a lot of deliberate intention about uh how it's laid out and making sure that the words wrap a certain way and we can see here when you start with this maybe this was the intention you know for this design but as we kind of change the size
17:00it's not as a pleasing distribution right when we have some orphan words here at the end and so one way I've solved this in the past is to say well we like the way this looks when it breaks right after noon so let's make this small again come find new and maybe we can just use a good old brake tag right here just like that right that works and we can see as we get bigger it kind of works um seems like it works great actually but if we go too small we have these really strange situations right because now it's not a nice even space the brake doesn't work so then you
17:36start doing all sorts of stuff maybe you add a class name here you make it hidden and then you have it show on small but this is kind of a mess wouldn't it be cool if there was a CSS feature that took care of this for us and it turns out there is so let's go ahead and get rid of this break and I'm going to come right here to H2 and I'm going to type in balance and I'm going to see this text balance utility and just like that we've got three lines now we've got two and that's it it's done check this out this is a new utility
18:11coming to the next version of Tailwind it uses a text wrap balanced CSS feature which has some support and more is coming the really cool thing about this property is that it's uh it's Progressive and it supports Progressive enhancement right because if you're using a browser that doesn't support it you'll kind of just fall back to what it was doing without the class so uh I don't know if you've ever worked on this before but this is so cool right just to see this again we have this kind of dangling orphaned word right there throw that on and it just figures out it can wrap all through it pretty cool right
18:42so I thought that was a fun one to show off as well man Adam even installed Vim extension on here for me this is so cool what a pal all right demo four this is um another cool one and this is another new feature coming to CSS which Tailwind is going to have support for we have this little selector right here just kind of a simple radio group with Native input type radios right here and we can see we're doing some custom work to kind of get this active style treatment we have like a border we have a ring and we have a background color here now the CEO came and said we want
19:21these to kind of pop a little bit more right so we want the active class to actually be a little bit more apparent and if we look in the HTML right here we're hovering and setting the background to zinc 100 this is kind of the overall label element so if we were to set this to like indigo 600 then maybe this is more of like what we want the active state to look like but obviously we only want to set this class if the input is checked right well if I undo that had some old history in it if I get rid of this class it'd be really nice if I could do
20:03something like checked background Indigo 600 right but it's not the label that's checked it's the input and we've never really had a way to style a parent element in an HTML tree based on the state of a child right um the group utility and Tailwind lets us do the opposite we can put a group on a parent and then style a child based on if the group is hovered something like that right so we've been able to go that direction but we haven't been able to go the other direction if you if you use jQuery back in the day they actually had this has property that let you do this
20:41and it's really cool well CSS is adding this feature as well and uh Taiwan has support for it via this has Dash utility and the square brackets we saw this from before it lets us put anything we want to here and have is saying if I have a child that meets this Condition it's a relational selector and if it meets this condition in the brackets then apply this class and we know that inputs get a checked condition if they're checked right radio elements so now if we say has checked let's set the background to Indigo 600 I'm going to remove this old class right here check that out
21:19normally at this point to actually pull off a design like this I'd be reaching for like react state or something pulling that in and then figuring out which of these options as I'm mapping over them are checked and then conditionally adding classes but we don't have to do that just like we don't have to do it down here we can style the input with the check pseudo class and now we can style this label with this has this new has relational selector which we can see right here just creates this CSS rule this is the new CSS feature that we can use just like this but our text is a little off right here
21:52this is a little too garish and I think we can make it look a little bit better this is the label right here Public Access and again it would be nice if we could do something similar right has checked and let's make this white but this div doesn't have it doesn't contain anything that's checked this is actually outside of the tree that contains input it's in a sibling tree well the label is the lowest common ancestor of both of those siblings right so just like we used to do with group for the the other case that we talked about if we put a group on the lowest
22:29common ancestor of both of these things that need it and then we use group has just like this now we can apply that so this is like a really cool kind of compositional point where we get to use these new features but the arbitrary syntax lets us do things that normally we would have to do a lot more work to do we can keep it all in CSS it's all going to work on the server on the client no matter which technology you're using and we can do the same thing right down here to soften up this text let's say group has checked and we're going to make this
23:03text indigo 200. so now that's looking a lot better so pretty cool I was pretty impressed when I first saw this again I learned about this through Tailwind I didn't know that this was an up-and-coming feature but I think a lot of people are going to be using have and CSS and in Tailwind uh once it's once it's fully stable so pretty pretty cool stuff all right last demo here we're going to be talking about container queries who has actually used container queries in production yet who's played with them at all play with container queries and CSS oh man container queries they're so cool okay so we all know we have responsive media
23:41queries right we can say add this class when the screen gets to a certain size so right now we have this single column grid right and once we get to a certain size we turn into a two column grid that's through a responsive media queries which we use through the responsive Utilities in Tailwind so if we come down here we can see at the small class at the small screen size which is 640 pixels we switch our grid to a two column grid and let's say that we're working on this design it looks pretty cool but we want to make the first testimonial kind of pop a little bit more we want it to
24:19stand out we want to give it kind of a featured treatment okay well one way we could do that is to make this take up two columns on the bigger screen we want to keep it single on the bottom screen here on the smallest column small screen size when it's in a single column but once we get to two columns let's make it stand out so we might come here to this div and you might say well we could say if we grab the index from this Loop maybe we'll add a class name that says you know if we're the first element in the loop let's apply a call span to but we
24:52actually don't even need the index for that we can just call span 2. let's just see it work first so if I do refresh
25:09where's my mob hmm let's see oh oh let me make sure I'm on the right thing page yeah container query yeah that doesn't look right let me go back here whoa I think I did something let me grab the beginning here this is a good trick for live coding demos actually let's see if this works whoa what on Earth
25:52oh this thing is freaking out look at this all right you know what I actually just remembered I was going to switch to Firefox anyway so let's let's just get rid of chrome and uh let's try this again you forgot everything that just happened all right here we go Firefox there we go all right I like the encouragement thank you appreciate you mob all right this thing's not freaking out oh boy something's going on here how do you bring up the terminal restart the bill how do you bring that turn on this is I know how to bring up my terminal but it's Adam's computer control J
26:30fast refresh whoa that's an odd one to land on let's see okay I think we're good look at that look at that perfect okay so we're gonna try this again it was fun I had fun let's get rid of that okay I never use Firefox but I can hide toolbars like that there we go cool animation okay so single column we want like this on two columns we want to give the first testimonial a a nice treatment and so one way let's just make sure this works again and let's try to not break the actual uh process here call span two this should work okay I'm not crazy I
27:29was worried there for a little bit thank you thank you thank you thank you so this gives every testimonial spans both columns in the grid right and if we only wanted it for the first one maybe we would do something like grab the index here and then say if I zero we apply it right but you can actually do it even easier um with just the first prefix in Tailwind check that out pretty cool right and if I hover over this you'll see this uses the first child a pseudo selector so that's pretty neat can even do something like odd and get every odd one which is kind of
28:08funny but this is an easy way to go ahead and give the first testimonial more space now we actually want to change the treatment because it looks a little bad when it takes up that much space the text is a little small it needs a little bit more breathing room we need to make it pop a little bit more and so at this point normally I would solve this problem by doing something like exposing a featured prop right so we would say featured and then maybe we would grab the index again and say okay this is featured if we're the first in the array and then we could go
28:38into testimonial and use the new prop to give it the new treatment but with container queries we don't have to do this right this is what is really cool about container queries so let me show you how this works we're going to go into testimonial I'm going to add a class to the root right here and I'm going to mark this as container and now we can specify new adjustments based on the size that the element takes up just like responsive utilities let us adjust our UI based on the size of the screen containing queries let us adjust the UI based on the size that the actual
29:14element takes up so for example if I come to this block quote where we render the body of the testimonial I can say at LG this is a container query and we see it says Min width is 32 REM let's go ahead and bump up a text size to text XL and so what's happening here is this card is taking up more than 32 Rems so it's getting that new treatment but once we make it small then we have another bug in our UI because we only want this to happen when we're on small screens so when we go back to the First Column the the first testimonial takes up the
29:55same amount of space as every other testimonial so it gets the same treatment but once we go to two columns the first testimonial takes up enough space for that container query to take effect pretty cool right we didn't change anything about this testimonial invocation the caller didn't have to know anything about how to call it to turn it into a featured card it just had to render it into a space that was large enough so let's go and keep going here text large let's make it um font semi-bold and uh at large let's make the tracking a little bit tighter and we'll come up to here to P6
30:38where we have our padding and let's just say when we're large let's go ahead and make P10 padding 10. it's looking better we've got six units of spacing here so maybe space Y8 for large and yeah that's starting to look pretty nice and again if we come down to where we're rendering this if I go back to odd instead of just first It's Kind of a Funny result but look at you get the idea we've made the testimonial render the appropriate version of itself based on the space and so the caller doesn't know car doesn't care however this card is rendered whether we're on a small screen
31:16or a big screen it doesn't matter the overall screen size what matters is how much space the container has so pretty awesome feature let's do one more thing actually I'm going to come and just grab this image and we'll come back up here and these all have an image for the actual company where the author works so we can drop an image right there which I think looks good on this featured one but these it doesn't have enough space so let's actually start this out as hidden and then if we're in a large enough container we'll go ahead and bring it back to block so pretty cool
31:53I think container queries you know once they once how to use them becomes more common knowledge I think they're going to replace a lot of the work we did with media queries just because of all this all this stuff that you're seeing here again we always get the right treatment based on the size I think it's particularly useful if you don't know how your component is going to be rendered so you can imagine something like a newsletter sign up that you want people on your team to be able to put in anywhere right maybe they put it on the footer where they have a full width of
32:24the screen and they want to have more information there maybe you put but but when this when the full page is shrunk down you want a small version right but maybe you also want that newsletter sign up to be in a sidebar somewhere so you could be on a large screen but still want to be able to use your newsletter sign up in a small area that's the perfect use case for container queries because you can make the newsletter component adapt to how much space it needs and the caller doesn't have to know know about it up front so pretty awesome a little technique coming to CSS
32:56and already available with the official container queries plugin from Tailwind so that's how we're doing this today and just one more cool little thing I want to show you if we zoom out here and go back to just making the First Column the featured one we'll see at this x at this XL break point whoops so close we'll see this XL break point I'll actually just zoom out so we can see the code we kind of get this four column grid we can see that right here Excel when we have 1280 pixels we get four columns and now our treatment looks a little bit funny so let's actually move it over
33:37with first and the XL we're actually going to start this column at 2. so that's a nice little trick we can use with call start 2. to start at the second second column of the grid and this looks pretty cool it's not bad but you can see there's kind of some awkward spaces in this layout and it'd be really cool if we could get rid of them well there's another really awesome feature coming to CSS and let me show you how it works I'm going to come right here and I'm going to say grid rows we're going to see these are the grid row utilities that are included
34:14in Tailwind they set the grid template rows property but again just like anything in Tailwind we can set our own using the arbitrary syntax arbitrary value syntax and check this out Masonry I think I misspelled it mace and read grid rows there we go all right let's try that again so just so you can see what happened delete that we've got these spaces I'm going to put this to masonry and this is another new feature coming to CSS if you've ever tried to build this before especially in a way that is robust to a responsive layout like this you know it is much much harder than
34:57adding a single class and now we have this really cool layout and all the space in between is even even though we have different height cards in the columns so those are some really cool things that you can do with modern Tailwind I love all the stuff I've learned about CSS since using tailwind and I also love that you can experiment with it using this arbitrary syntax so that's what I wanted to show you today thanks a lot and here's Adam [Applause] awesome job man I think my mech's on yeah do you have it memorized yeah that was great thanks Tim I really appreciate you walking through some of
35:43that stuff I'm really excited about a lot of those features so next I guess I want to talk about some of the stuff that we're doing uh with Tailwind the tool you know Sam talked a lot about some of the developer experience stuff we're working on in terms of exposing some of these new CSS features and stuff to you well there's sort of two sides to tail in as a framework there's what we let you build and then there's what it's like to configure and work with and set up and and use it as part of your tool chain so I want to talk a little bit about
36:13some of the improvements uh that were that we're working on there so before I get into any of this stuff because um it's interesting and some of it is a little bit different I do want to talk about like a value that we really have in terms of maintaining tailwind and something that we really care about and we think about a lot with every change that we make to the tool is that backwards compatibility and stability is super super super important to us I don't think anybody wants to waste time upgrading and migrating things to a new version of something when everything was working totally fine before so I've got some new
36:46things that I want to show here but all the stuff that we're talking about here these aren't like Tailwind CSS V 4.0 Paradigm shifting things this is like two and CSS v3.4 use it in the next version if you want type of stuff so let's get into it let's see if this is working cool so Tailwind The Black Album no um so we've been working on an internal project that we're calling Tailwind CSS oxide which is sort of our vision for sort of the next evolution of Tailwind CSS as as sort of an engine for generating your CSS and I want to talk about some of the
37:26improvements that we're trying to make there and then walk you through a demo of how some of it works so you can sort of see what it looks like to apply this stuff in a real project so the first thing that we've been working on is unifying the tool chain whatever the that means um so I think if you work with Tailwind for any amount of time you've you've you've probably noticed that tone isn't usually the only thing that you install to process your CSS on a project that you're using Tailwind Even in our own documentation we tell you to install post CSS install auto prefixer if you
38:00want to handle like build time Imports you got to install post CSS import if you want to transpile modern CSS syntax features you have to install something like post CSS preset inv and I think that made a lot of sense in the early days of Tailwind when I think asking people to go sort of go all in on a on a tool like this when it was still really new felt like a big ask but now like we could kind of talked about I showed you some of the things that people are building with this and some of the teams that are adopting to and I think there's a big chunk of
38:31people out there who just want to install tailwind and not think about anything else and that does all your CSS stuff for you and you just don't think about anything so that's one of the things that we've been working on so the oxide engine that we've been working on has built-in support for at Imports so anytime that you have some CSS stuff that you want to reorganize and move into a different file you don't have to install post CSS import anymore you just do it and it just works same with vendor prefixing so in the past we've always asked you to install auto prefixer add it to your post CSS
39:04config file otherwise you might be missing necessary vendor prefixes for browsers that you need to support going forward while we're still probably going to make it possible for you to disable that if you want by default we're just going to handle that for you so you don't have to think about it syntax transforms so I I kind of briefly mentioned post CSS preset EnV there's a lot of sort of modern CSS features that can be sort of down transpiled into a syntax that current CSS supports so I think the classic one that will resonate with everyone is like CSS nesting so we've had support for compiling nesting
39:42through like SAS and less and stuff like that forever and you can also do that with post CSS with post CSS nested or I think it's built into post CSS preset MV as well and we have the Tailwind CSS nesting plug-in that makes it a little easier to do it with Tailwind in a way that's compatible with some of Tailwinds other features a CSS nesting is actually landed officially in several browsers already but not everyone can use it as is in in the browser because people need to support like Safari 15 still which is still pretty popular but that's the sort of thing that we can just do for you so
40:15instead of having to install a plug-in if you want to use nesting in your custom CSS just use nesting we'll just transpile it for you another one that people are getting excited about lately is like modern white gamut color space stuff so has anyone heard of like lab or lch color spaces yeah a couple people yeah they're like really crazy bright colors that only like really great displays can show like all your phones can probably render them but most desktop monitors can't um those are only supported in fairly recent browsers which means most of the time you just don't get to use them because you don't want people to see
40:53nothing on browsers that don't support those color formats but there's some math that you can do to sort of figure out the nearest RGB color that is supported by older browsers and fall back to that so that's an example of something that we're also just going to handle for you going forward so you can just use modern color space stuff and anyone whose device doesn't support it we'll just see like the nearest fallback color no configuration required tell them we'll just do this so how does this all work under the hood all these things are powered by this new tool called lightning CSS which is developed by Devin govern in the parcel
41:26team which is this really modern rust-based CSS transformation platform that's just incredible you know in the past we would have recommended use Auto prefixer if you need to add vendor prefixes now we can say use lightning CSS if you want to add vendor prefixes because it does the same thing and it does it faster or you want to add import support install post CSS import now we can just say use lightning CSS lightning CSS is actually the answer for basically every single feature that you might install a plug-in to handle with post CSS so rather than just trying to tell people to integrate this themselves we
42:02just decided let's just integrate it and take advantage of all the benefits that we get from that and the better developer experience and again I'm going to walk through a demo that shows how this stuff actually works okay so the next thing that I want to talk about before we get to the demo is improved performance so lightning CSS like I mentioned is a native Library written in Rusk which means it gets to take advantage of like multi-threading and parallelization which you can't easily do in node which gives you a lot of opportunity to make things faster than you could ever make them in node so by leveraging lightning CSS for
42:38vendor prefixing and for minification for example we get a lot of performance improvements detailment just out of the box for free sort of following the lead of tools like lightning CSS and a lot of other developer tools that have been looking for ways to optimize performance by taking advantage of writing certain parts of their code in Native languages and sort of compiling it down to native code we have actually been rewriting some core pieces of talent and rust to take advantage of this sort of thing so one of those things is the parsing layer of Tailwind that looks at all of your HTML files or react files or whatever
43:14and finds all those little classes and pulls them out so tail can generate all the CSS this is like a perfectly parallelizable task because it's basically just like a pure function it takes some input and spits out an array of class names so we can split that up across all the cores on your computer and do it way faster than we ever could with node here's like an example like the performance Improvement so Intel and CSS 3.3 I have like a pretty realistic example project that I'm going to use for this demo when I measure the performance of doing a production build and with minification and stuff like
43:46that until 1 3.3 we're getting compile times of about 330 milliseconds using the new oxide engine doing all the exact same stuff the whole thing composing like 130 milliseconds so it's like over twice as fast which is pretty exciting and there's there's still a lot of low-hanging fruit left like there's we're still doing a lot of stuff that we could lean on Lightning CSS for more that we're looking to keep exploring so I'll show you this stuff but it's pretty exciting and it's pretty cool and it's pretty fun and it's a good excuse to learn a new language but it's always fun too selfishly so the the third piece of this sort of
44:25oxide engine is simplified configuration which on the surface doesn't sound that exciting maybe simplified configuration sure but here's an example of something that people run into all the time that we hear about in our Discord and GitHub issues basically every day someone's create a new file they're adding some classes to this new component that they made they open it up in the browser and some things just aren't there the Border radius is wrong even though the class is right there in the corner what's going on like why is this not working and inevitably the answer is always that they forgot to go into their Tailwind config file update their content array
44:59to include like this new folder where they've added this component or whatever and when they do that and restart the build everything works but it's just like annoying little paper cut that makes the experience worse for everybody so something we've been working on is what we've been calling automatic content detection so by taking advantage of the fact that we've Rewritten a bunch of core pieces of tone and rust we can do more work than we were doing before and still do it faster than the less amount of work that we were doing in the previous engine so by using some heuristics and algorithms that we came up with for
45:35trying to make really educated guesses about where the files are going to be in your project based on what files you have already and where they're located and what extensions are using and stuff we've actually put together like a very what feels like very Bulletproof you know feature that lets you just not configure content at all that whole content thing in your tablet config disappears until it just knows where everything is and it just works and it works perfectly and have a couple other configuration things that I want to talk about but I'm going to say those for the demo so why don't we look at some some actual
46:05code back in my comfort zone you know so what do we got here okay so I've got like this demo project here you can see it's got like this big components folder where lots of sort of components that you'd expect to see in your classic front end heavy sort of application in the config file let me know if this is clear enough by the way is the font size big enough yeah it's okay so you know we're installing post CSS import we've got Tailwind CSS nesting installed then of course tailwind and auto prefixer and in our app.css file you know I'm importing all Tailwinds little players I'm importing some custom
46:46fonts into the base layer and those are over on this file so this is why I care about the post CSS import stuff you know I've got some custom typography Styles and then the typography Styles there's like some nesting and stuff like that so I want to process this nesting too so that's why I've got all this stuff sort of installed so let's just like run the build run builds latest I think it was so that's kind of like the performance times I was telling you right it's like 338 milliseconds 341 milliseconds 353 milliseconds just gets slower and slower and slower the longer you go so let's just switch this over to the
47:30oxide engine I'm just going to do npm run build oxide which is going to run sort of our experimental Insider version of Tailwind is doing the exact same thing oh 136 milliseconds 136 milliseconds 136 milliseconds you might think there's a console log and a code base even that says console log done in 136 milliseconds but I assure you that's not the case [Laughter] there we go see it's just very very stable okay so now that we've switched over to this oxide engine let me show you what we can do in terms of simplifying the configuration and have everything still work so first let's start like the post CSS config
48:16right so I'm going to open I've got like this output CSS file here whoa so we can sort of come on I guess I need to open the main one too whatever out why is this not showing me uh all the tabs
48:43you animal
48:49all right okay we'll get there we'll get everything in the right place okay app.css out.css okay so we can look at sort of inputs and outputs here this is minified so I'll compile with the unminified one so the npm run I've got like a Dev script that does the same thing but without minification 136 milliseconds who would have guessed um so let's just take a look here like for like typography class you can see that it's processing the nesting you know so all those like Ampersand symbols are gone um so let's just go to the process config and just get rid of the post he says import
49:29and run it again oh it cuts lower oh still then still all of that stuff the import is handled because the typography was in a separate file nesting is still handled sure let's delete the nesting oh and nesting is all still there so we didn't need that let's look for like um some webkit prefixes or something I think like webkit appearance is sort of the classic one let's get rid of model prefixer do we need that nope all render prefixes are still being added so now what took like configuring four plugins putting them in the right order making sure everything was wired up correctly you just don't have to
50:12think about it with what we're working on now you just install the newest version of tablet it just does all that stuff it's pretty pretty cool and we're hoping to find ways to even make this like post CSS config unnecessary and I don't have any official news on that yet but we're collaborating with maintainers of popular build tools and Frameworks to see what we can do to just get tail and detected kind of like SAS or less where if the project knows you're using tail end it and you have it installed it just runs it for you because this ends up being like the only really remaining piece of
50:42post CSS configuration okay so next thing is like the content config right so we've got the path to all of our content here normally if I was going to like delete that and then if I run like the other old build of Tailwind it's going to complain to me now it's going to be like no utility classes we're detecting your source files you jackass and make sure that you add the content option but the newest version of telling that we're working on merely just warns you that this feature is experimental and may change but it does work and all the CSS is generated so that's pretty cool
51:23so on top of that I mentioned like the um the modern color space stuff you can see in the config here that I've got these OK lch colors for these like really neon colors if we go over here and take a look at the compile CSS and we'll do the unmenified one so we can read that more easily you can see that it's like compiled it down to lab instead of okl CH because lab has um better browser support I guess than okay lch but can represent all the exact same stuff and it's also found like the nearest hex code that'll work in any browser and
52:01added that as a fallback so if the browser sees this declaration and can't parse it it'll fall back to this one and everyone will just get something pretty close and I didn't have to do any configuration for this this is just something that tailwind's going to do for you now thanks to all the awesome work that the parcel team has done on Lightning CSS so that's pretty exciting so a couple other things that I want to show you so one is like a really minor paper cut thing but I'm like unreasonably excited about it so I'm going to share it anyways and maybe you'll be excited about it too
52:33um you're probably used to doing like at 21 bass you know putting all that stuff in all your files or if you're using Imports in the past you'd have to switch to our import syntax because of a bunch of weird rules about how post CSS import cares about the Order of Things in oxide we've set things up so that you simply just import tail and CSS and that's it and very good and even doing that all of the uh all the layers stuff still works because this just kind of inlines the exact same thing that you would have typed by hand in hindsight super obvious thing that
53:13should have been Tailwind for a long time but I really just love like how it feels it just kind of feels like I'm pulling up my CSS file I've installed Tailwind import Tailwind CSS Tailwinds in my project that like feels like the right experience so that's pretty exciting to me unreasonably exciting the last thing I want to show you and this is something I didn't talk about when I was just going through the slides because this is the one where I uh I'm curious to see what people actually think about it because I think it's kind of cool but you know we'll see what everybody thinks
53:42you'll notice that in like our config file now that we don't have like the content stuff the only thing that's left in here is this like design token configuration stuff I look at this and I kind of see it as like this is like a CSS value but because I'm in JavaScript I have to wrap it in a string that's kind of weird or what this list of fonts is in an array and if I don't want to put it in an array because you often have to quote fonts I have to use like different types of quotes to make sure that I can still have quotes in their stuff it just it's
54:12always kind of felt like this clunky not native thing and I have this like Vision in my head of trying to make Taiwan feel like a more holistic native sort of platform-ish tool even though of course it's always going to be a build tool that has to do all sorts of crazy stuff so let me show you like an idea that I have that we've prototyped that I
54:40llers and go over to the CSS file and I'm going to create a new selector called theme which is kind of like the root selector in CSS but it's targeting what we're calling like your theme I'm going to paste in this stuff we'll do a little bit of cleanup here get rid of these quotes add our semicolons so it looks like CSS and we're going to turn these into just vanilla CSS variable declarations so we're just declaring a color called neon pink a color called neon lime a color called neon cyan trying to build again uh the dev one so we can actually read it and of course like we haven't changed
55:23the config right so you'd expect these colors to still be there but if I go back to the config I can delete the colors run it again oh what do you know the clothes is just over there and that's kind of cool [Music] and we can do the same thing with the fonts so let's paste these in font family and get rid of the array just make it feel like CSS you know it even like it's you know prettier understands it it formats it when I save because it just looks like CSS go back and delete this stuff from the config run the builds what did we call those fonts like
56:07Satoshi so you know there's our display font it's there it's working and then you look at this config file it's like huh that's weird why the does this file exist and then you delete the file and then you run the build and everything still works and now the only place that you're even thinking about Tailwind is in a CSS file instead of in a JavaScript configuration file so there's still some like weird stuff to figure out here and there's like a lot of complex things that I've been wrestling with how the hell I can represent them in CSS um like one of the weird things is like
56:44if I want to override all the colors the best I've been able to come up with so far is like colors on set and in theory if we've I think this is not that doesn't work so that's just an idea but those are the sorts of things that I'm still trying to like figure out how we can support all the things that Tailwind currently supports with the JavaScript configuration but like I look at this file and it just kind of feels like oh this speaks to me in this hard to explain way so this is a path that I'm really interested in exploring and I think what excites me about it the most
57:16is that something that we hear about a lot from Tailwind users is they almost feel like dirty writing CSS sometimes even though there's a lot of good reasons to write custom CSS in your projects people are always looking for ways to do it in their config file or something instead to keep everything in JavaScript and I feel like if we can push a lot of the configuration to CSS people won't be looking for like how do I add my custom font face stuff to my config file shouldn't that be in the config file well no just put it in your CSS don't add this weird unnecessary
57:47layer in between everything so I think if we can if we can nail this from an API perspective that um it's gonna it's gonna make people a lot more comfortable just using CSS for the stuff that you can just use CSS for like keyframes and font face and all that sort of stuff so very early very sort of experimental but um yeah I'm excited about that so hope you guys think that's kind of cool too [Applause] so there's one other thing that I want to talk about um and one of the things that like we've always cared about along with tailwind and sort of like the goal of the whole project
58:35has been to help you build Custom Designs you know that's like where we've sort of put our flag down like sure it's nice if you can just help people move faster but if it's ever at the expense of people being able to build totally custom stuff I'm not really interested in working on this project anymore to me Tailwind was meant to be an alternative to opening up a vanilla CSS file and doing everything from scratch it needs to have all that flexibility for it to still be something I really believe in at the same time I really want to find ways to give people like higher jumping off points when they're
59:11building stuff so they can move a little bit faster and that's something that we aim to solve with products like Tailwind UI where if you want to grab like a pricing section for your website you can find something that's pretty close to what you want grab the HTML paste it into your project tweak it however you want and you're moving a lot faster we've got a new thing that we're working on that's sort of in that same vein that's taken a little while to really figure out how to get right and it's still very very very early but because this is the first time we've ever got anyone together in the same
59:44room to talk about Tailwind stuff I thought I better show off some of the exciting early stuff before it's ready and give everyone a sneak peek and make it a little more special so we're working on this thing that we're calling Catalyst which is our very first sort of fully componentized react application UI kit I'm going to show you an example of a demo project that we've been working on that is built with catalyst so I can sort of explain a little bit more about what it is and then show you some code too this is sort of a demo kind of SAS dashboard application for like a ticket
1:00:24tool think of it kind of like an Eventbrite alternative or something and this is built with a bunch of pre-designed pre-implemented components that are part of this package that we're calling catalyst so the sidebar layout comes from Catalyst this date picker date picker the thing that everybody has wanted us to build forever you know comes from Catalyst these drop downs part of catalyst table drop downs over here you know you could click into orders there's like a dialogue um you know there's all the kind of form elements that you'd ever be looking for in any of the projects that you build just all the sort of building blocks
1:01:01that you need to build like an application UI we're trying to design them and build them with react and put them together in a way that you can get these into your project and move really really fast now I think a lot of people might be looking at this and thinking like well this kind of looks a lot like what you get with Tailwind UI already with sort of like the application UI kit I can copy and paste different things and that's mostly true but what we've tried to do here is is double down on sort of like a different part of the trade-off curve and the best way to sort
1:01:33of demonstrate that I think is to is to jump into sort of some code and show you show you kind of what we imagine the developer experience to be like so remember this is this is just an early preview and there's there's a lot more that we want to do but I'm excited to still show you kind of where we are at with it so far so first things first I've got this empty next JS app that I've created and I think it's important to mention that what we're building here although it is a react sort of component kit it's not nexjs specific you can use this with a
1:02:07remix you can use it with a Veet based react app or you can use it with an inertia app for example and all I've done here is just create a new app install tailwind and installed a couple of libraries that we're using as part of catalyst so I've installed react Aria components which is another great project that's built by the same people who work on parcel Devin and Adobe which is a really great accessible sort of headless UI Library that's really battle tested with tons and tons of of components I've got framer motion for animations and stuff I've got heroicons which is our own icon library and I've got clsx
1:02:48which is just a great little utility for conditionally adding classes to elements everything else is just like stock vanilla stuff that comes with the next Js so imagine you've downloaded Catalyst whatever that means right so let's go back a folder here you've downloaded catalyst v0.0.0.0.0.0.1 unzipped it I pull it open there's a components folder I can just copy this components folder into my app oh that was loud and now the mental model here is you've just basically scaffolded all of the sort of boilerplate and generic pieces building blocks that you need to build these sorts of applications so what it's not is it's not a library that
1:03:38you install from npm and consume like material UI or something like that those libraries are awesome for The Right Use case but it doesn't really align with my vision for what I want to help people do with Tailwind which is build custom stuff and I think if you're constrained to whatever apis and configuration options and stuff that are exposed by the sorts of libraries that you're using it never really feels like your own code and I I always want to make sure that the things people are building with Tailwind feel like their own code so I'm just going to pull open like a little page example that I've got here
1:04:10and restart the server because God knows what port is running on three thousand with the defaults so we got this beautiful white screen here let me uh yeah we'll just kind of time I'll do a split screen thing I think see if we can make that work so where was that here all right so again really early but I'm going to show you a couple of little pieces so say we wanted to build like a little um create account form or something we give you building blocks like page heading you know and we could say like create your accounts and now we've got a page heading here
1:05:03what's a thoughtfully chosen typographic Styles and a thoughtfully chosen font size and line height and all that sort of thing now say if you wanted to create like the fields you know I can pull in like text Fields I'll have to click import I have from our components these are all coming from this components folder that we just dumped in and say that's like got a label of email you know okay maybe let's add some space between these elements so I'd like a class name of space Y8 or whatever maybe we want to add another field like for your password and maybe we'll make this a type email
1:05:46you know all these props just kind of proxy through down to the root input that we're rendering so you want to add like a some descriptive text or something you know we can add a description like must be at least 12 characters you know so the thing I think is interesting is like while it doesn't look like much on the surface the opportunity that this creates for us to Think Through kind of like thoughtfully designed apis that match the sort of thing that you'd be building in your app if you're building your own UI kit is really interesting and it's not something that we've had the
1:06:21opportunity to really do before with the sort of delivery mechanism that we use for tail and UI where it's just copy and paste the snippet do whatever you want with it I think that's really powerful and I'm glad we have a product that fills that need but a lot of people want something that's more batteries included where different components have different relationships with each other and stuff like that a good example of that like something that we can't just do when the delivery mechanism just static HTML is like validation errors you know so say you submitted this form and an error came back from the server and you kind of
1:06:54grabbed it out of the response and you just populated this with like this is the worst password I've ever seen in my life you know okay okay I'm automatically rendered red we've got like a red validation State now and if we get rid of that everything kind of goes back to how it was cool right and then like you've got like the stuff everybody needs all the time like your classic like button component you know um so create accounts and you can of course mix and match all the stuff with all the sort of compositional tools you use in Tailwind already so like I want this to be on the right
1:07:32so I'm going to use text right to move it off to the right it's not meant to be like this abstraction layer where you never think about Tailwind in fact if you want to customize these components and that's sort of one of the main reasons that you'd use this thing you open up the components directory you'd find something like that text Fields component and remember this like isn't in node modules or anything right like this is you've scaffolded this into your app it's your code so one of the challenges for us because of that and it's something that has proved to be an interesting Challenge and something
1:08:04we're continuing to work hard on is making sure that the code that we give you feels like code that you would write in your own project it doesn't feel like really clever or obfuscated Library code or anything like that so we're using typescript currently on this stuff because I know everyone's but begging us for typescript support for things and I'm pretty sure we're going to be able to find a way to distribute it with typescript and without typescript for people who just want to stick with vanilla JavaScript but yeah say I wanted to like tweak the the padding or the gap between the description and the and the
1:08:36label I can just come in here and change it and you're not yeah you're not editing code that's going to get overwritted next time you run npm install like this is your code we just generated a starting point for you that is like thoughtfully designed and lets you sort of hit the ground running so there's a lot more to this of course than like just these sort of simple basic components that I'm showing you here but I thought kind of focusing on these was a good way to sort of try and set up the mental model for for what we want the developer experience to be like
1:09:03you've got the package you dump it into your project it's yours you can do whatever you want with it but it's built hopefully you know our hope is that we're building it in the exact same way that you would build it yourself is that once you've been using it for a while and building your app within customizing it and tweaking things like six months into the project you almost forget that you used our thing as a starting point that it's just your code and I think that's the only way that we can build something like this that lives up to sort of that that sort of value that I have for the
1:09:33framework where a team like Shopify could use this to build a product and not feel like they were relying on a third-party thing they just feel like they got to like skip the first six levels of the game of the game you know so to talk more about some of the design details that have gone into this and dig deeper into a lot of these things that that we're designing and including here I'm going to bring out my business partner who is a a former YouTube sensation but I think he wants to get back into the game uh Steve shoger all right
1:10:10cool how's it going everybody having a good day um so Adam just gave you a sneak peek of this this is the application UI kit we've been working on and um this is sort of the main dashboard screen in it it sort of captures the general look and feel we're going for for this thing so what I want to do is kind of get into some of the design details from the design thinking and sort of the taking on the Journey of where how we got to where how we got to this page so just before I get into that I want to talk about a few of the goals like we
1:10:46really wanted something that a look that was very flexible like you could put any logo up in that top corner it would still work for your brand uh but we didn't want it too generic either we wanted something that you know had a little bit more personality to it and this is really tricky at first um like here's some of our earlier Concepts that we were exploring so you know we tried incorporating color into it you can see how we have this little gradient styled selected option in the sidebar here um you know here's a great way to sort of like one thing I like to do when I
1:11:22design application uis is uh sort of incorporate a visual gimmick into it so because like you know internal app screens they always tend to have you know they're just tables and forms and and it's just a lot of boring text right there's not a lot of opportunities like you would get on like a marketing site to incorporate that like marketing Flair that visual Flair into it and this is like what you kind of say here at the top is this like a nice way to kind of bring your Brand's visual identity into the into the your internal screen so here we kind of have this like these warp circles grazing the
1:11:57top of the page here um so like stripe for example I got a screenshot of stripe here they kind of do that like they like these colored Stripes is a really important part of their visual identity and they kind of brought it into some of their select dashboard screens so it's a nice little way to bring like again bring that visual flare into the the uh app screens and we explored like you know a few other variations of that here's sort of this rainbowy thing in the sidebar and here's another variation of that but to us it felt a little too opinionated it felt like almost you know unless your
1:12:31brand is like this visual like nicely represents your specific your visual identity it felt like a cheap gimmick to us so we kept exploring from there and um and another error we started exploring is is like the sidebar area like we saw more opportunities there you can kind of see like just a subtle way to introduce like some of these visual gimmicks that I'm talking about so here you can see kind of the sidebars kind of hugging the content area here's another version where the sidebar is kind of offset from the edges of the viewport which is kind of a cool idea here's another one where it's kind of
1:13:09similar with our content areas kind of offset from the edges of the viewport and you know I felt a little bit too busy for us but it was kind of cool nonetheless and you know we even tried some similar ideas where I think it's just kind of fought in the background but they just felt just a little too vanilla a little too plain but so where we landed was something sort of a combination of a few of these ideas um where the sidebar is kind of in the background it's sort of hugging the the content area and the background kind of gets extended across the top here uh we
1:13:39like this because it was like a nice visual gimmick it wasn't overly painted you can still put any logo up in that top corner it would still work uh and we have like we wanted to provide a darker version as well just to you know if you want something a bit more bold um you can you can try that as well and what I really liked about this sort of treatment is we you can carry it over to other areas of the UI so you know we made these slide overs in this mobile nav it's you know normally I go like edge to edge on the on these components
1:14:09but here you kind of it's a nice way to like carry that visual gimmick over to these components as well so that's a it's always nice where you can like find something that you can just carry out throughout a variety of different components on your app um so yeah now one thing you might be thinking when you're looking at this it looks very gray it looks like you know it's black white and gray and that was very intentional because we like again we wanted to be very flexible and it pretty much works with anything so we still want to provide you with um components for like all of
1:14:42the colors that Talent offers we want to we wanted to provide you with all of these button options because you know like table colors are not necessarily interchangeable because colors like blue indigo and red they're they're inherently much darker than colors like yellow and lime and the cyan we have here so you can't just use that like white text that we use on the darker buttons on these lighter buttons you have to kind of do an inverted treatment so we wanted to provide all of these components for you as well and we've got the dark mode versions as well and we want to provide some badges as well and
1:15:13you know if you incorporate this into your here's a forms page we kind of have going on and if you wanted to kind of incorporate those colors into it you can do that this way you can change the black color if you feel like going ahead and going a bit further you can you can customize the uh you can customize like the toggle component in the checkbox like a lot of the form elements maybe if you wanted to like add some color to the sidebar you can go ahead and do that here's an orange version as well I played with and it's kind of cool I
1:15:39guess um so yeah so that's like a you know a way you can be really aggressive with the color and you can bring it in but uh you know I like to introduce the colors in a more subtle way too like I like using these badges a lot like so for example we have these sort of status badges on our on our dashboard screen and um you know these you usually use these to um these colors to sort of highlight the severity of these values so often you use like green for something that's positive and red for something negative and yellow for something maybe that's like neutral or pending
1:16:14um but what I like to do just like out of my own flavors just sort of rotate that Hue a little bit so I can I'm going to select these I can do some figma with these selection colors so you know instead of a green I can try sort of a a nice lime you know I'm going to do that I'm going to change the text color of the turret instead of red I might want to maybe try pink and I can change the text color for that as well uh and then maybe instead of yellow I can go to like an amber and it still does the job of of
1:16:45communicating what those values represent but it just kind of adds a different vibe to it so it's it's another cool way to use color like everyone just kind of defaults to you know the very vanilla colors and so this is a nice way to add your own flavor to it um so another thing I want to talk about is form design forms are like one of my uh favorite things to design when I'm making a designing an application UI it just it's all the components they kind of there's a lot more opportunities for like fine little details like I love trying to perfect like getting the
1:17:23perfect Shadow on those inputs and um now uh my co-worker James McDonald who's here from Scotland today he's really good at these details and that's he's really inspired me in this stuff and um uh with his permission I'm gonna share some of his secrets and how he gets that perfect looking Shadow so I have a I have a tail and play here what one is it is it this one do we close my tail and play here
1:18:00is there more
1:18:13maybe just reopen the link that I sent you
1:18:40yeah I'm not sure he's going to add a background and uh make sure when I duplicate it that gets put underneath kind of thing it was a gray 300. [Laughter]
1:19:12so many browser windows hard to keep track of everything maybe to access yeah okay so there we have a input and this is how I used to design input side to have like a border on there and make it gray 300 and I just make it like a vertically offset Shadow underneath to give it that depth and it does a pretty good job but when I started working with James and kind of seeing what he did he he works in figma and what he always did is he created an outer stroke on it on the input like a really dark one and reducing the opacity to about 10 now we
1:19:48can't create a stroke per se the same way you can in figma in in CSS but uh you can do that with Tailwinds uh ring utility so I'm going to first duplicate this um I'm having our underneath so we can kind of compare it after the fact and then I'm going to remove this border so I'm just going to make it border uh let me get rid of that and I'm going to add a one pixel ring to it and then like I said I'm going to make it a really dark because I'm going to make it a ring
1:20:21Gray 950. and then so you have the dark border on there now and I'm going to reduce the opacity to about 10 percent so what you can kind of see there is what's what's happening there now is like that shadow is kind of getting exposed underneath that because you have the opacity on there with you can't do that with the Border because the border is kind of the on the inside of the input so you can't really expose the shadow underneath it and it just looks much more crisp and like the top one here it's looking a little bit muddy are you guys seeing the same thing looks
1:20:52very like muddy on my screen here uh compared to the bottom one now it especially becomes noticeable when I change the background color here to like something pretty obviously grade 200. now it's going to looking you know that you you can still maintain that contrast ratio on the bottom one because it has the opacity on it but this top one's looking super muddy now it's hard to see that border now it's kind of clashes with the shadow a little bit so uh that's a nice way to get like a really crisp looking Shadow incredibly nerdy stuff uh where did my figma file go is that it there it is
1:21:37um so so we apply that same treatment to some of the other form elements like the the check boxes and the toggles and the select menus we really want it to uh deviate from like native OS components and and really have something that's really custom and Polished and consistent with everything else but we don't deviate entirely from native West stuff we really like to lean into uh some of the Native OS patterns and conventions for like animations in interactive elements so a good example of that is like on drop down so I'm going to show you kind of like where we mimic a native OS uh thing and I'm gonna
1:22:18what do we got here for browsers here so like if I look yep you can if I show you what we can do on um if if I go on like the on the desktop here if I show like a drop down on Mac OS you can see that the it appears instantly right and the animation is sort of saved for when you click away does this little quick Fade Out There and that's nice because it's like a it doesn't interfere with your user experience it's very instant when you're trying to find what you're looking for but the delightful ex little animation is saved for after the fact it's and we
1:22:58like that we like what we like about that is that it's super subtle it's like you almost don't even notice it but it's just a nice but you kind of do little details like that they all add up after a while so we apply that same treatment to our uh um to our application what are we using we're using Chrome to show the uh brave brave brave brave so we apply that same kind of thinking to our drop downs here um where we have a drop down on we have a little here you know same kind of thing it's instant on click but then when you click away does that little
1:23:37subtle fade out right uh now another area that we borrow from from NATO OS is uh on on the mobile experience so you know we as like designers and developers are always designing and creating these things on desktop computers and oftentimes we like some mobile patterns kind of get overlooked as a result of that so a good example of that is in dialogues right so I'm going to go to this orders page I'm going to go to order here we haven't so on desktop we often have like a DOT we treat dialogues we send them in the middle of the viewport right and naturally as we resize our browser we
1:24:20just kind of keep it in that same position but we what we wanted to do if you actually spend time like looking on your device and experience like dialogues they usually like kind of animate it from the bottom right and that's a nice little detail that people don't consider when they're designing on desktop so that way when you're holding your device with one hand you can reach those actions at the bottom so we apply that same kind of thinking here so when you get to the um yeah when I click that now it kind of animates up from the bottom here no resend refund there we go
1:24:50so that's just a good example of where we kind of borrowed emit we mimic the native OS Style um so the last thing I want to talk about is is dark mode uh you know it's 2023 now so it's like you know there's I just hit this and uh I put my arm down and I hit the button and I don't know what just happened there um
1:25:20what I just hit command Z and that solved that problem [Laughter] what was I saying uh dark mode it's only you know it's not you're most required to ship your apps with dark one nowadays so of course we wanted to include that as well and you know every time I tweet about uh tail and colors uh everyone's always asking if there's like some magical solution we could provide where you know we if you make your light version at the flick of a switch you can get your dark mode version and you know that's obviously that would be awesome but it's not coming anytime in the foreseeable
1:25:55future and I can kind of explain why that might happen you know designing such dark mode for the past few years like one thing I've kind of learned it's very hard to do dark mode as an afterthought and we kind of are embracing that now in in treating dark mode as like completely separate artwork so a good example to kind of explain why we need to do that so take these buttons for example so the buttons on the left here they all have a subtle Shadow being cast off them and it's kind of hard to see but it's it's there But but so just to give it some depth
1:26:32right but that shadow would essentially be invisible and dark one because you have the dark on dark so but in order to get that same depth treatment you know you can't rely on the absence light if you use like the the surface of the button and to create that like reflect it to create like a reflective surface from the light source right so instead on dark mode you know because we don't have the light background to cast a shadow onto instead of uh doing like a gray blurred shape underneath the or Shadow casting out from the shot we we do this sort of Inner Glow on top of the the
1:27:06button to kind of give that same give it that same depth that's just an example of where we have to sort of rate new artwork and there's many more things that you have to consider like that when you're making dark mode now we don't deviate completely from you know we do keep some things consistent when we do dark mode and sort of explain that is um you know we CR we try to maintain our depth cues so to explain that you can kind of see what I mean by that is like on this sidebar here it's kind of like this off-white because it's in the background it looks like it's further
1:27:37away in the the content area is very white so it looks like it's closer to you and we apply that same thinking when we do dark mode it's so the the sidebar it's like the darker element it's like further back so we're using a gray 950 for that and to make the look like the content area is a little closer to you we make it a lighter color as well like many people think you simply need to invert the colors to kind of get the dark mode effect but uh we kind of think about it in the opposite way when we're doing these background elements so yeah
1:28:08so that pretty much covered that's like kind of a sneak peek at some of the design details we put into this thing and uh Adam's gonna take it back and he's gonna kind of show you how we've built some of these details that I share with you plus a few more so thanks good job buddy cool so yeah like Steve mentioned I do have just like one cool trick that I want to show you guys uh that was it's a really neat Tailwind trick uh related to how we kind of had to do one of these things so let me navigate the hellacious uh stuff that we got here
1:28:48and see what I can do so let's we're gonna start this server three thousand two and we'll just keep it simple here okay so the one that I want to show you guys that I think um I get really excited about is uh the the dialogue thing so you might think that this is like kind of easy um like it's just like responsive design or whatever right like the dialogues here and on mobile or whatever you know it slides up from the bottom and I actually I kind of removed the code that made it slide out from the bottom so I can show you how to do it
1:29:30but because we're using frame or motion under the hood to do all this stuff it really isn't that simple and I think a lot of people's tendency is because you have to kind of configure these transition animations in JavaScript you end up reaching for JavaScript to try and like measure the viewport know which things you should add and stuff like that and there's a way to do it with just like totally vanilla CSS with Tailwind that I think is extremely clever that I I want to show off uh so let's think about what we need to do here if we want to actually have this thing slide up from the bottom why don't
1:30:04we just like implement it statically first so I'm going to have to just like guess on some of these values and we'll kind of figure it out as we go here so by setting like a y offset we can sort of say like what should be happening to this dialogue as it sort of animates in so here I'm saying if I've got this right we'll have to test I might have to like add some negative signs or something here but my goal here is to say like start the dialogue like shift it down 20 pixels from where it's sort of supposed to be then animate it back to like the zero
1:30:39position so you can see that is kind of scaling up a little bit now let's like move it to the bottom so I'm going to get rid of this my auto and just make an Mt Auto and then maybe on non-mobile screens so maybe we'll do it like SM We'll add MB Auto as well so it goes back to the to the middle so let's make it slide up a little bit more maybe we'll do like 80 pixels or something and I think we'll we'll play with the scale too and get kind of get rid of that just so you can see okay so that's like sliding up now but we don't want to
1:31:13do the scaling similarly like on Mo on desktop like we don't want to do the sliding so how do we do this how do we say only do one or the other depending on like some sort of break pointy type of thing so the trick that I came up with for this is to do it with CSS variables and create those CSS variables using Tailwinds arbitrary properties which is kind of some you know the nuttiest stuff that you can do with Tailwind basically so let's start with like the mobile one so on mobile we want it to scale from sort of zero percent so watch this
1:31:48in square brackets I'm just going to say like scale from and I'm just going to say zero percent uh no scale from 100 we want it to stay at 100 the whole time and I want it to scale to 100 so here we're basically just saying the scale shouldn't change right so remember 95 please that is your job so we're going to set this to scale from we're going to set this to scale two we probably don't really need the scale too I guess 100 is going to be the same for both but whatever and let's just see do we get do we do this right
1:32:29so in theory this should still or this should not scale now right so that's not scaling it's just kind of sliding up but that means on desktop it's also not scaling but we want it to scale so rather than trying to sort of change these values based on the break points we can just redefine the variables based on the break points because we can combine arbitrary properties with modifiers and so in so let's redefine scale from to be 95 percent here and now it's scaling it's sliding up also though right so how do we get rid of that so on desktop we don't want it to scale
1:33:06so we're going to have to do the same sort of thing so let's like to find some variables so we're going to say like slide from say 80 pixels and this one we'll just leave it at zero pixels whatever so let's replace these like 80 pixels with far slide from and let's just go back to the mobile one just make sure that's still that didn't work so um let's try making it not a pixel value sometimes frame of motion is picky about anyone uh see what I might be doing wrong do I need to do in here too you think slide from 80 no 80 pixels
1:33:57any syntax errors do we see any syntax errors
1:34:04uh yeah I don't think I don't think that one should be a big deal not sliding oh it slowed down at the end so that's interesting so let's uh I don't know I don't know why that didn't work but let's just try you think so let's try it dude every time I try to do this I feel like I know exactly what I'm doing and it ends up I feel like it just changes the code and node modules just changes you know so sliding down on close but it's not sliding yeah but I still I don't think that's going to be yes do you oh yeah okay so we got these variables
1:34:55for everything obviously I knew that um but you know now on desktop it's still going to be sliding which we don't want to do so we can do the same sort of thing you know so SM slide from we'll just not slide from anything and whatever just to be super ultra clear slide to zero pixels too in theory now now it's just scaling on like desktop screens and just sliding unlike mobile screens so that is like a pretty clever you know like I think that's a really interesting way a really interesting way of using some of these these features until and to do something that you might have like
1:35:35reached for like a resize Observer and a bunch of like complex stuff for it's always really satisfying to me when I could find like a way to do something with with just CSS and not be responsible for any of the things that are broken with it instead I can blame the people who work at Google for that so anyways that's all I wanted to show you guys I thought that was kind of a cool kind of advanced tail and trick to sort of finish off some of the stuff we've been sharing with um again I just kind of want to say you know thank you to everyone for coming
1:36:02this is like really cool I'm super excited to to meet everyone and get a chance to hang out and you know we got a bunch of free pizza and free drinks and stuff so like hang out and enjoy and get to know all the cool people who've traveled from all over the world to be here and be with other people who are super excited about Tailwind at the very end of the night on your way out we've got like Swag Bags at the back table with like t-shirt sizes labeled on all of them figured we'd do it that way so you don't have to carry them around the whole night so you can
1:36:31just grab one on your way out also there's beer glasses in every single one of them so don't just grab the T-shirt out or we're going to have a big broken glass problem but uh yeah feel free to grab that on the way out and you know hang out as long as you like and if you have any questions you want to chat about anything just find me find me after and I'm looking forward to connecting with everyone meeting everyone so thank you again to everyone for coming out to this it's been awesome really appreciate you being here foreign
No line in this video contains that word.
Where these words come from. This is the caption track YouTube holds for this video, written automatically by YouTube rather than by the creator. We read it, tidied the line breaks and laid it out so it can be read. The plain text version is at https://viewrankai.com/tools/youtube-transcript/CLkxRnRQtDE.txt.
All rights in this video belong to Tailwind Labs. Watch it on YouTube. If this is your video and you would rather this page did not exist, tell us and we will remove it.